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

Question

我将 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 似乎工作得很好（在开发和生产中），但我认为这可能是因为它在 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;
    },
};

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

Answer 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"]
};

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

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

// 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]
      : []
  ]
}

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

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

NextJS with global CSS import fail in production mode

next.js

purge

css-purge