React Single-spa项目配置webpack css-loader后出现CssSyntaxError如何解决

• 当前项目基于Create React App（CRA）创建，CRA内部默认已内置完整的.css文件处理规则，你自行新增的css处理规则与内置规则重复，导致.css文件被两次匹配并应用loader链
• webpack loader执行顺序为从右到左，重复匹配后会出现css-loader → style-loader → css-loader的错误执行逻辑：style-loader输出的是JS格式的样式注入代码，被第二次执行的css-loader当作CSS文件解析，因此触发语法错误
• webpack5已经内置静态资源处理能力，额外配置的file-loader也可能引发资源处理冲突

方案一（无自定义css处理需求时首选） #

直接删除你配置中test: /\.css$/i对应的整段规则即可，CRA内置规则已经可以正常处理普通CSS文件，无需额外配置。
如果使用的是webpack5，建议同步替换file-loader配置为内置的资产模块能力，性能更优：

return merge(defaultConfig, {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: 'asset/resource'
        },
      ],
    },
  });

方案二（有自定义css处理需求时使用） #

如果你确实需要自定义CSS处理逻辑（比如新增postcss、less/sass预处理器支持），需要先移除默认的CSS匹配规则，再加入自定义规则，避免重复匹配。以craco覆写配置为例：

module.exports = {
  webpack: {
    configure: (defaultConfig) => {
      // 先移除默认的css处理规则
      defaultConfig.module.rules = defaultConfig.module.rules.filter(rule => {
        return !rule.test || !rule.test.toString().includes('.css')
      })
      // 再合并自定义规则
      return merge(defaultConfig, {
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: ["style-loader", "css-loader"],
            },
            {
              test: /\.(png|jpe?g|gif|svg)$/i,
              type: 'asset/resource'
            },
          ],
        },
      })
    }
  }
}

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