具有全局 CSS 导入的 NextJS 在生产模式下失败

Posted 2023-03-06

【中文标题】具有全局 CSS 导入的 NextJS 在生产模式下失败

【英文标题】：NextJS with global CSS import fail in production mode

【发布时间】：2020-10-02 08:28:50

【问题描述】：

我将 Next.JS 与其他一些模块一起使用。其中之一，Megadraft，带有自己的 CSS。我不知道这是否相关，但我也使用 PurgeCSS。

在开发模式下一切正常，但 CSS 似乎在生产模式下中断。更明确地说，Megadraft 的所有类在生产模式中似乎都没有定义。 检查器中的 html 节点仍然显示类在这里，但它们只是没有定义。

以下是我在pages/_app.js 文件中导入上述 CSS 文件的方法：

// pages/_app.js
import "css/tailwind.css";
import "megadraft/dist/css/megadraft.css";

这是我的postcss.config.js：

// postcss.config.js
const purgecss = [
    "@fullhuman/postcss-purgecss",
    
        content: [
            "./components/**/*.js",
            "./Layout/**/*.js",
            "./pages/**/*.js",
            "./node_modules/next/dist/pages/**/*.js",
            "./node_modules/next/dist/Layout/**/*.js",
            "./node_modules/next/dist/components/**/*.js"
        ],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    ,
];
module.exports = 
    plugins: [
        "postcss-import",
        "tailwindcss",
        "autoprefixer",
        ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
    ],
;

我正在使用下一个^9.4.4。值得注意的是 TailwindCSS 似乎工作得很好（在 dev 和 prod 中），但我认为这可能是因为它被用作 postcss 中的插件......

为了以防万一，我将 webpack 集成到我的项目中以解决我遇到的错误，其中代码告诉我需要 loader：

// next.config.js
module.exports = 
    cssModules: true,
    webpack: (config, options) => 
        config.node = 
            fs: "empty",
        ;
        config.module.rules.push(
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [
                options.defaultLoaders.babel,
                
                    loader: "url-loader?limit=100000",
                ,
                
                    loader: "file-loader",
                ,
            ],
        );
        return config;
    ,
;

无论如何，如果有人知道为什么这在开发模式下有效而不是在生产环境中有效，那可能会有很大帮助。

【问题讨论】：

我正在使用 tailwindcss ^1.4.6 及其内置的 purgeCSS 和 megadraft 的样式仍在生产中。您可以在此Sandbox 中查看我的设置。下载到您的本地机器，npm i 和 npm build 进行测试。如果这没有帮助，请尝试将./node_modules/megadraft/lib/**/*.js 添加到设置中的content 数组中，如here 建议的那样。

您好，感谢您的回答！我的 Sandbox 出现以下错误：``` ./styles.css 1:0 Module parse failed: Unexpected character '@' (1:0) 您可能需要适当的加载程序来处理此文件类型。 > @tailwind 基地； | @tailwind 组件； | @tailwind 实用程序；```

我确实尝试用 postcss-preset-env 替换我的代码中的 postcss-import + autoprefixer 就像你所做的那样，但它仍然无法正常工作......有或没有我的 purgecss 数组，有或在content 中没有./node_modules/megadraft/lib/**/*.js。我真的不知道可能出了什么问题。我将我的next.config.js 添加到我的原始帖子中，因为它使用 webpack 并解决了您的 Sandbox 向我显示的错误，并且可能是我的 CSS 未能被清除的原因。

你的堆栈看起来很奇怪。为什么要使用你使用postcss 和tailwindcss，完全不同的理念。如果你想使用顺风，它已经在使用 purgecss：tailwindcss.com/docs/controlling-file-size/…。如果您使用的是postcss，则不应以任何 CSS 开头。

我发现沙箱中的yarn.lock文件会导致你使用yarn时看到的错误。我删除了它，您可以尝试导出沙箱并重试...next.config.js 对我的设置来说是不必要的。如果这没有帮助，如果你能分享你的回购会很好。

【参考方案1】：

选项 1：使用 Tailwind CSS 内置 PurgeCSS

// tailwind.config.css
module.exports = 
  purge: ["./components/**/*.js", "./pages/**/*.js"],
  theme: 
    extend: 
  ,
  variants: ,
  plugins: []
;

// postcss.config.js
module.exports = 
  plugins: ["tailwindcss", "postcss-preset-env"]
;

请务必使用npm i --save-dev postcss-preset-env 或yarn add -D postcss-preset-env 将postcss-preset-env 添加到包的开发依赖项中。

选项 2：手动设置清除并将 "./node_modules/megadraft/dist/**/*.css" 添加到 purgecss 白名单内容数组：

// tailwind.config.css
module.exports = 
  theme: 
    extend: 
  ,
  variants: ,
  plugins: []
;

// postcss.config.js
const purgecss = ['@fullhuman/postcss-purgecss',
  content: ["./node_modules/megadraft/dist/**/*.css", "./components/**/*.js", "./pages/**/*.js"],

  defaultExtractor: content => 
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
    return broadMatches.concat(innerMatches)
  
]

module.exports = 
  plugins: [
    'tailwindcss',
    'autoprefixer',
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]

可能有更好的解决方案，但这两个是我能想到的。

【讨论】：

非常感谢！我确实同时使用了这两种方法，其中一个文件中有一个不完整的 content 数组，由于某些原因，我也有冲突......我选择了你的选项 1，它非常有效！跨度>

很高兴为您提供帮助！编码愉快！