How to config Scss and purgeCss in Next js custom postCSS config

Question

I am using Scss and Bootstrap for designing my project. In order to remove unused Css with purgeCss , I have customized my postcss.config.js file like this:

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

The problem is that postCss is ignoring my Scss files and not showing styles. How can I add Scss to postcss.config.js file?

It

Answer 1

The Problem come from @fullhuman/postcss-purgecss. You can delete it.

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

And then work scss again. Or you can change setting about content.

Paschasia