使用 Nextjs Tailwind Emotion 导出项目失去了 tailwind css 样式

Question

我正在启动一个新的 Next.js 项目，该项目具有现有的情感.js 样式，现在我正在尝试通过此指令添加 tailwind 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 时，它没有顺风样式，但是我的情感.js 样式仍然有效。

我尝试在这里搜索有关此问题的所有答案，但没有一个起作用。

我怀疑这与情感.js 的冲突有关，指令如下jsxImportSource

这是我使用情感.js 的方式。不过在开发过程中它运行良好

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


function App() {

}

Answer 1

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

更改自

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

到

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

不确定这是什么方式，似乎有关于使用相对 URL 而不是绝对 URL的讨论，但现在我制作了一个自定义脚本，自动将链接更新为相对路径

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