CRA React项目中如何将公共SCSS样式抽取为单个CSS块避免重复

CRA默认的分包规则仅会对通过JS入口直接引入的全局样式、以及大于30KB的CSS块做自动提取，通过@use引入的SCSS公共变量、mixin、公共类如果散落在各模块SCSS中，默认不会被单独抽离，你可以按以下步骤调整：

方案1：未eject CRA项目（推荐） #

• 首先安装依赖：npm i @craco/craco css-minimizer-webpack-plugin -D（yarn用户替换为对应yarn add命令即可）
• 项目根目录新建craco.config.js，添加如下配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 新增样式缓存组，强制提取所有公共样式
      webpackConfig.optimization.splitChunks.cacheGroups.styles = {
        name: 'common-styles',
        test: /\.(scss|css)$/,
        chunks: 'all',
        enforce: true,
      };
      // 开启CSS去重能力
      webpackConfig.optimization.minimizer = webpackConfig.optimization.minimizer.filter(
        plugin => !(plugin instanceof CssMinimizerPlugin)
      );
      webpackConfig.optimization.minimizer.push(
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: ['default', { mergeRules: true, discardDuplicates: true }],
          },
        })
      );
      return webpackConfig;
    }
  },
  // 可选配置：如果公共样式仅包含变量、mixin，可全局注入，无需每个模块手动@use
  sass: {
    loaderOptions: {
      additionalData: `@use "src/styles/your-common-scss-path.scss" as *;`
    }
  }
};

• 修改package.json中的启动命令，将react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

方案2：已eject的CRA项目 #

• 打开config/webpack.config.js，找到optimization.splitChunks配置段，新增样式缓存组：

cacheGroups: {
  // 保留原有其他缓存组配置，新增如下内容
  commonStyles: {
    name: 'common-styles',
    test: /\.(scss|css)$/,
    chunks: 'all',
    enforce: true,
  }
}

• 找到CssMinimizerPlugin的配置项，在minimizerOptions.preset中添加discardDuplicates: true，开启重复样式自动删除能力。

注意事项 #

• 如果你的公共SCSS仅包含$变量、@mixin、%占位符这类不会生成实际CSS代码的内容，不需要做抽离，本身不会产生冗余代码
• 仅当公共SCSS中包含实际类名定义时，才需要按上述配置抽离，抽离后公共样式会被打包为单独的css/common-styles.xxxx.css文件，首次加载时全局引入即可

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