具有全局 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 似乎工作得很好（在 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;
    },
};

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

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

请务必使用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]
      : []
  ]
}

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