如何在 Next js 自定义 postCSS 配置中配置 Scss 和 purgeCss

Question

我正在使用Scss和Bootstrap来设计我的项目。为了删除未使用Css的purgeCss，我自定义了我的postcss.config.js文件，如下所示：

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

问题是postCss忽略我的Scss文件并且不显示样式。如何添加Scss到postcss.config.js文件？

Answer 1

问题来自@fullhuman/postcss-purgecss. 您可以将其删除。

 [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],

然后再次使用scss。或者您可以更改有关内容的设置。