前言:昨天自己安装了一个新的vue项目,拉取项目以后按装sass依赖就死活安装不上,然后就在网上一顿查,最终解决了。基本把设计到的问题全看了一遍,在这里做一下整理。
心酸历程:
一般sass安装报错总结
大纲:
1.node-sass、sass-loader版本匹配问题,最佳的 sass 环境配置是 什么?
2.Python未安装
3.node-sass 已经废弃,推荐使用 dart-sass
1.node-sass、sass-loader版本匹配问题,最佳的 sass 环境配置是什么?
参考资料:https://www.jianshu.com/p/33e4cec41bd6
原因:不同的 node.js 版本需要安装不同的 node-sass
版本。并且要匹配合适的 node-sass、sass-loader
版本。
解决办法:
(1)将nodejs 版本为改回 14.x,不要使用 16.x 等版本;
(2)卸载node-sass 和 sass-loader
npm uninstall node-sass sass-loader
(2)安装匹配版本:
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
基本这种设置就能不会报错了。
小结:安装sass 基本环境最佳匹配 “nodejs 14.x” “sass-loader@7.3.1” “node-sass@4.14.1”
。
2.Python未安装
报错信息:
Error: Can't find Python executable "python", you can set the PYTHON env variable.
原因:在 npm 请求 node-sass 文件中,如果失败,会尝试本地编译安装 node-sass,这里需要有Python环境。
解决办法:执行 npm install -g windows-build-tools
安装 windows-build-tools。
3.node-sass 已经废弃,推荐使用 dart-sass
原因:node-sass
简直是噩梦,太难安装了,还各种nodejs版本问题,有的时候几天都装不好,为了更加简便所以替换为dart-sass
,vue中也推荐使用dart-sass
,只是要注意部分语法不同,如/deep/
。
安装方式:
(1)卸载node-sass 和 sass-loader
npm uninstall node-sass sass-loader
(2)安装
npm install sass-loader@^10 sass -D
官方的说法,安装 10.x 版本的 sass-loader 后,所有依赖成功安装,项目可以正常运行。意思就是说10.x 更加稳定吧。
到此,dart-sass
安装方式结束。
备注:使用dart-sass
以后,/deep/
修改为 ::v-deep
/* 修改前 */
.a {
/deep/ {
.b {
color: red;
}
}
}
/* 修改后 */
.a {
::v-deep {
.b {
color: red;
}
}
}
好了,基本到此,sass 安装的所有安装错误都能解决了。