React项目未导入同名CSS类覆盖本地样式的Webpack配置问题排查

你遇到的样式覆盖问题，核心是两个webpack配置错误，加上对全局CSS打包逻辑的认知偏差：

1. 配置位置错误：你把modules: true写在了sass-loader的配置项里，但模块化解析是css-loader的能力，sass-loader只负责将scss语法编译为原生css，这个配置写在这里完全不生效，和你不想用css-modules的诉求也冲突。
2. 样式加载逻辑不统一：你对.css文件用MiniCssExtractPlugin.loader抽离为独立css文件，对.scss文件用style-loader动态插入到页面head中，两种加载方式的插入顺序不可控，很容易出现后加载的样式覆盖先加载样式的问题。
3. 全局CSS本身的特性：只要样式文件被项目依赖树中任意一个模块引入（不管是不是你当前的Header组件），最终都会被打包进产物全局生效，不存在“未被当前组件引入就不生效”的隔离性，同权重样式下永远是后加载的覆盖先加载的。

按照以下步骤调整配置即可，不需要引入css-modules：

• 删掉sass-loader配置里无效的modules: true项
• 统一.css和.scss文件的loader逻辑，不要混用两种样式注入方式，生产环境统一用MiniCssExtractPlugin.loader抽离样式，开发环境统一用style-loader注入，保证样式加载顺序可预期
• 调整入口文件的引入顺序：在入口文件最顶部先引入所有全局公共样式，再引入组件、路由等业务代码，保证组件就近引入的样式解析顺序晚于全局样式，避免被覆盖

修正后的webpack loader配置参考：

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : "style-loader",
        "css-loader",
      ],
    },
    {
      test: /\.s[ac]ss$/i,
      use: [
        process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : "style-loader",
        "css-loader",
        {
          loader: "sass-loader",
          options: {
            implementation: require("sass"),
          },
        },
      ],
    },
  ],
},

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