真的该删掉node-sass这个毒瘤，dart-sass才是健康的

背景

旧版本的项目一直都使用的node-sass，但存在以下的问题：

• 停止维护，改用的了sass（dart-sass）来作为sass的编译依赖
• node-sass需要安装python还有MV C++
• 安装依赖需要指定特定的node版本，拉取失败率也高

项目依赖版本

• node@14.x
• vue@2.x
• webpack@3.x
• vue-loader@14.x
• node-sass@4.7.2
• sass-loader@6.0.7

找寻sass版本与webpack、sass-loader的对应关系

因为这个项目已经不会做很多的更新迭代，所以就想着以最少的替换来做对应的更新。

webpack3.x对sass-loader版本的支持

阅读sass-loader的更新日志，发现它只在8.0.0的更新中注明了需要webpack4.x以上的版本才可以支持，那就使用sass-loader7.3.1来作为更新的版本

Sass与sass-loader的版本关系

翻了一下sass的版本日志，并没有发现有注明需要哪个版本的sass-loader，就直接使用webpack文档中的sass-loader的sass版本1.22.10

 {
   "devDependencies": {
     "sass-loader": "^7.2.0",
     "sass": "^1.22.10"
   }
 }

修改步骤

1. 卸载node-sass，安装sass@1.22.10

    npm uninstall node-sass
    npm i sass@1.22.10
   

2. 全局替换/deep/为::v-deep

检查阶段

::v-deep样式不生效

更新完成之后并没有任何报错，但是在经过一轮样式的查看之后发现了问题，deep替换之后的样式并没有生效，百思不得其解

后来看到了这篇文章：node-sass 迁移至 dart-sass 踩坑实录

vue-loader版本的原因，在vue-loader14.x并没有:v-deep的写法实例，可能这个版本的deep做的不太行？

项目的vue版本只能是2.x版本，所以依据官方文档2.7迁移将vue-loader升级到了15.10.0版本

升级之后

将所有的依赖更新了之后启动，还是编译失败

查阅了vue-loader的文档，从14.x改为15.x需要新增对应的插件，其实上面的文章写了，看漏了

 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 ​
 {
     plugins: [
         ...,
         new VueLoaderPlugin()
     ]
 }