记录配置 Webpack 时遇到的一个百思不得其解的报错:Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
1.在看到这个问题以后,我第一时间去 reset.css 中查看语法是否有误;结果是没有任何错误。
2.在确定 css 文件无误以后,我把配置规则中的 css-loader 配置移除,只保留 style-loader,发现可以正常运行;这就说明是 css-loader 的问题。
3.我将上述报错信息复制到必应,大部分人告诉我要降低 css-loader 版本;我试图通过改变版本来解决问题,然并卵……(这个过程我持续了很久)
4.直到我用谷歌搜到 Stack Overflow 上的答案:
看第一句,这位大佬告诉我们:报错的根本原因在于 css 文件在编译时被 css-loader 加载了不止一次……
5.这时,我才恍然大悟。我发现我运行命令用的是 webpack.config.js 里的配置,其中已经将通用配置和对应环境的配置合并在一起了。而我在不同的环境下又合并了一遍,导致 css-loader 重复处理了 css 文件,导致报错。
6.这次经历再一次告诉我一个道理:前端报错,请第一时间通过谷歌 + StackOverflow来解决问题。