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

Question

我正在使用Scss和Bootstrap来设计我的项目。为了使用purgeCss移除未使用的Css，我已经按照以下方式定制了我的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文件中？

- Moein Moeinnia

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。或者您可以更改有关内容的设置。

- PushaLee