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

起因

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

 

npm 命令

# 卸载
npm uninstall node-sass sass-loader
# 重新安装 
npm install -D sass-loader@^10 sass

 

 pnpm 命令

# 卸载
pnpm uninstall node-sass sass-loader
# 重新安装 
pnpm install -D sass-loader@^10 sass

 

yarn 命令

# 卸载
yarn remove node-sass sass-loader
# 重新安装 
yarn add -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 版本带来这么多坑可真简单啊！

 

 "webpack": "4.46.0"