使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式答案

【问题标题】：Export project with Nextjs Tailwind Emotion loses tailwind css styles使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式
【发布时间】：2021-09-24 19:38:53
【问题描述】：

我正在开始一个新的 Next.js 项目，它具有现有的 Emotion.js 样式，现在我正在尝试通过此指令添加尾风 https://tailwindcss.com/docs/guides/nextjs

这是我的 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

和tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.js', 
        './components/**/*.js',
        './lib/**/*/js'
    ],
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: []
}

和 next.config.js

module.exports = {
    images: {
        domains: [
            'user-images.githubusercontent.com'
        ]
    },
    typescript: {
        ignoreBuildErrors: true
    },
    eslint: {
        ignoreDuringBuilds: true
    }
}

这是我在 /styles/global.css 中使用 Tailwind 的方式

@tailwind base;
@tailwind components;
@tailwind utilities;

并将该 css 包含在 /pages/_app.js 中

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

当我运行 next dev 时，所有样式看起来都不错，但是当我运行 next build && next export 时，它会导出到 /out 文件夹，但是当我尝试运行 index.html 时，它没有顺风样式，但是我的 Emotion.js 样式仍然工作。

我已尝试在此处搜索有关此问题的所有答案，但均无效。

我怀疑这与emotion.js 与jsxImportSource 等指令的冲突有关

这是我使用emotion.js 的方式。虽然在开发过程中运行良好

/** @jsxImportSource @emotion/react */
import { useState, useEffect } from 'react';
import { css, jsx } from '@emotion/react'


function App() {

}

【问题讨论】：

问题是生成的out/index.html stackoverflow.com/questions/58784444/…中的相对样式表链接

标签： next.js export tailwind-css postcss emotion-js

【解决方案1】：

检查生成的 out/index.html 后发现样式表有绝对链接，将其更改为相对链接即可解决问题。

改变

<link rel="preload" href="/_next/static/css/c8843280217d36ba4773.css"

到

<link rel="preload" href="./_next/static/css/c8843280217d36ba4773.css"

不确定这是什么方式，似乎有关于 Use relative URLs instead of absolute 的讨论，但现在我制作了一个自定义脚本，将链接自动更新为相对路径

htmlContent
    .replace('link rel="stylesheet" href="/_next/static', `link rel="stylesheet" href="./_next/static`)

【讨论】：