Question

我正在开始一个新的 Next.js 项目，该项目具有现有的motion.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 时，它没有顺风样式，但是我的情绪。 js 样式仍然有效。

我已经尝试在此处搜索有关此问题的所有答案，但没有一个有效。

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

这是我如何使用emotion.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"

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

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

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

1 个答案: