踩坑记录:css-loader 4.x.x版本导致vue中样式不加载

2,348 阅读1分钟

升级了几个npm包的版本之后发现css样式都没了,排查了半天才发现是css-loader新版本改动的问题。

问题版本

vue-style-loader:4.1.0

css-loader:4.2.2

问题原因:

css-loader 4.0后默认对 esModule 设置的是true,而 vue-style-loader 4.1.0 默认接收的是 commonjs 的结果,也就是默认接收的是 “css-loader中 esModule 设置的是false的结果”,导致样式无法加载。

解决方案

网上找到的办法是直接去改css-loader或者vue-style-loader的源码,具体见本文底部链接。在webpack官网找到css-loader有esModule参数的配置项,可以直接改 在webpack配置中将css-loader的esModule值改为false即可。

vueCli解决方案:

参考:blog.csdn.net/vv_bug/arti…