vue-cli项目sass-loader版本报错的烦恼

场景

• vue-cli 创建项目，
• npm i
• npm run serve
• 项目中使用 sass
• sass—loader && （sass || node-sass） 版本匹配不对报错

原因 loader版本组合不对

sass 编译loader处理方案有两种：

• node-sass 和 sass-loader
• sass 和 sass-loader

解决办法

正确匹配sass编译loader组合版本，经过实践如下匹配可正常编译：

• node-sass@4.13.0 sass-loader@7.0.0

• sass@1.18.0 sass-loader@7.1.0

另 less编译组合版本

• less@4.0.0 less-loader@7.0.1

uniapp项目特殊之处：不支持低版本sass-loader, 支持sass-loader@10.1. 1+版本

故组合如下：

• node-sass@5.0.0 sass-loader@10.1.1
• sass@1.32.13 sass-loader@10.1.1

注意

• sass-loader@7.+版本 不支持样式穿透写法 /deep/, 换低版本 sass-loader@6.0.8

• 或者 用 ::v-deep替换 /deep/

==备注== 以上版本组合不报错，也可自行实践探索拓展上下大小版本

番外篇=>样式穿透tips

• 样式穿透三种写法：
  • /deep/
  • ::v-deep
  • 三个右箭头 >>>
• 注意点
  • sass-loader@7.+版本 不支持 /deep/, 换低版本 sass-loader@6.0.8
  • sass / sass-loader不识别>>> 写法
  • /deep/ 和 ::v-deep 是 >>> 的别称
  • stylus样式穿透用 >>>
  • 据说 ::v-deep 比 /deep/ 效率更高

==end==