最近项目中遇到这么个问题,需要本地组件库(坑)npm link到项目中,组件中写了大量的/deep/样式穿透,我的项目中的sass-loader版本为8.0.2,不兼容/deep/,又不可能把组件库中的/deep/全改,,所以只能降低sass-loader版本。
npm install sass-loader@7.0.0 -D
安装后启动项目报错,错误信息显示sass-loader需要node-sass支持,且node-sass版本>4。
ok,安装node-sass。
npm install node-sass -D
到这里,/deep/不再报错了,但是项目中出现了新的问题:
这又是个什么问题呢,经过仔细排查,发现原来是element-ui样式导入的问题。element-variables.scss样式文件下导入elementui的样式:
@import "~element-ui/packages/theme-chalk/src/index";
这样的写法本来在sass-loader 8.0版本下是没有什么问题的,但是版本降级后出现问题,我只能归结于低版本sass-loader不支持(没找到错误原因),所以我只能在main.js中引入,算是解决了这个问题。
import 'element-ui/lib/theme-chalk/index.css'
PS:不建议使用node-sass,sass官方推荐dart-sass,目前vue-cli在选择sass预处理的时候也会默认优先使用dart-scss。
npm link
sass-loader
node-sass