node14 升级 node16 后 vue2 项目中 sass 报错问题

起因

不知道因为个什么手贱把之前的 node14 版本卸载了去官网重新下载安装了一下 node，最近版本升级到了 node16，以为应该不会有什么问题吧，结果把项目一跑，我勒个去，一堆飘红的，看控制台提示主要是这个 node-sass 报的错。

劫难

网上大部分说是降 node 版本的，只能说一点都不好笑，要是过两天想玩个新玩意儿报错又让我升 node 版本怎么办，淦还是另寻高就吧。

根据 node-sass 官网的说法，不同的 node.js 版本需要安装不同的 node-sass 版本，并且 node-sass 已经废弃，推荐使用 Dart Sass 代替，Dart Sass 在 npm 中的包名为 sass 。

查看 package.json 发现原项目的 node-sass 版本为 4.14.1 , sass-loader 版本为 8.0.2 于是卸载了 node-sass 和 sass-loader ，并重新安装：

# 卸载
npm uninstall node-sass sass-loader
# 重新安装 
npm i sass-loader sass -D

然而还是报错：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: tent-admin@1.8.3
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6

...
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.62.1
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^5.0.0" from sass-loader@12.3.0
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"" from the root project

从报错信息来看，最新的 sass-loader@12.3.0 要求 webpack@“^5.0.0”，然而 vue 项目中 webpack 版本为 4.46.0 ，因此出现冲突。考虑到 vue 项目是通过 vue-cli 创建的，并非自行配置的 webpack ，因此考虑通过升级 vue-cli 来更新 webpack.

# 全局安装 vue/cli
npm install -g @vue/cli
# 更新项目中的vue-cli依赖
vue upgrade

更新后发现，最新的 vue-cli@4.5.15 依旧是基于 webpack@4.x 版本，那么只能考虑降一下 sass-loader 的版本了，根据 vue-cli 的文档：

When using webpack version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with webpack 4.

最终解决

npm install -D sass-loader@^10 sass

按照官方的说法，需要安装 10.x 版本的 sass-loader 以配合 webpack4，并卸载被 node16 抛弃的 node-sass ，取而代之安装 sass 即可解决问题。

等等，可能还没完，如果你项目中有用 /deep/ 选择器可能还会报一个 SassError: expected selector. 的问题，比如我这个大冤种全都是使用 /deep/ 来更改 element-ui 中的样式，这时候需要将 /deep/ 替换成 ::v-deep：

/* 报错： */
/deep/ .el-drawer__header {
	padding: 0;
    margin: 0;
}

/* 修改后解决： */
::v-deep .el-drawer__header {
	padding: 0;
    margin: 0;
}

简单升级一下 node 版本带来这么多坑可真简单啊！

参考：https://www.jianshu.com/p/33e4cec41bd6