vue项目引入第三方组件,/deep/的兼容与sass-loader版本影响

1,151 阅读1分钟

最近项目中遇到这么个问题,需要本地组件库(坑)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