如何在Next.js自定义PostCSS配置中添加Scss支持并配置PurgeCSS？

要让PostCSS支持SCSS文件并正确处理，需按以下步骤操作：

1. 安装必要依赖 #

首先安装postcss-scss，它能让PostCSS识别并解析SCSS语法：

npm install postcss-scss --save-dev
# 或使用 yarn
yarn add postcss-scss --dev

如果项目还未安装SCSS编译工具，同时安装sass（dart-sass）：

npm install sass --save-dev
# 或使用 yarn
yarn add sass --dev

2. 修改postcss.config.js配置 #

在配置中指定SCSS解析器，同时可将SCSS文件加入PurgeCSS的扫描范围，避免误删SCSS中定义但未在JS/TSX里引用的类名：

module.exports = {
  parser: 'postcss-scss', // 指定PostCSS使用SCSS解析器
  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}",
          "./styles/**/*.scss" // 新增：扫描SCSS文件中的类名
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

3. 确保构建工具正确处理SCSS文件 #

以Webpack为例，需在配置中添加SCSS文件的处理规则，让SCSS先经过Sass编译为CSS，再交给PostCSS处理：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // 根据需求选择style-loader（开发环境）或MiniCssExtractPlugin.loader（生产环境）
          'style-loader',
          'css-loader',
          'postcss-loader', // 用PostCSS处理编译后的CSS
          'sass-loader' // 将SCSS编译为CSS
        ]
      }
    ]
  }
}

完成以上配置后，PostCSS就能正确处理SCSS文件，样式可正常显示，同时PurgeCSS会精准移除未使用的CSS代码。

内容的提问来源于stack exchange，提问作者Moein Moeinnia