已安装对应loader的Webpack导入多份CSS文件无法识别如何解决

问题原因 #

你webpack配置中CSS规则的test正则使用了全局修饰符g，这是故障的核心诱因：
Webpack对文件路径做规则匹配时，带g修饰的正则会记录上一次匹配的末尾位置（lastIndex），匹配完第一个CSS文件后该值不会自动重置，匹配第二个CSS文件时会从上次记录的位置开始校验，导致无法命中CSS规则，Webpack找不到对应的loader处理文件就会抛出识别失败的错误。单文件导入时不会触发第二次匹配，所以运行正常。

修复方案 #

修改webpack.config.js中module.rules里的CSS匹配规则，删除g修饰符，改为匹配.css后缀的标准写法：

// 原错误写法
test: /\.css/g,

// 替换为
test: /\.css$/,

修改后重启Webpack服务，即可正常导入多个CSS文件。

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