导出使用Nextjs Tailwind Emotion的项目会丢失tailwind css样式

Question

我正在启动一个新的Next.js项目，该项目已经有了现有的emotion.js样式，现在我正在尝试通过这个指南https://tailwindcss.com/docs/guides/nextjs来添加tailwind。

以下是我的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文件时，它没有tailwind样式，然而我的emotion.js样式仍然有效。

我已经尝试在这里搜索所有答案，但没有一个能解决问题。

我怀疑这与emotion.js的指令（如jsxImportSource）产生冲突有关。

以下是我如何使用emotion.js。尽管在开发过程中它运行良好。

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


function App() {

}

- onmyway133

---

问题出在生成的 out/index.html 文件中的相对样式表链接 https://dev59.com/zFMH5IYBdhLWcg3wqg5V - undefined

Answer 1

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

从以下内容进行更改：

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

到

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

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

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

- onmyway133