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

Posted 2023-03-06

【中文标题】使用 Nextjs Tailwind Emotion 导出项目丢失了 tailwind css 样式

【英文标题】：Export project with Nextjs Tailwind Emotion loses tailwind css styles

【发布时间】：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 ***.com/questions/58784444/…中的相对样式表链接

【参考方案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`)