vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换

一、问题

package.json

"node-sass": "^xx.xx.xx",
"sass-loader": "^xx.xx.xx",

vue 项目中，安装依赖的时候出现错误，如下：

error D:\proj\cscec-8bur-vms\dashboard-vuejs\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: D:\proj\cscec-8bur-vms\dashboard-vuejs\node_modules\node-sass
Output:

$vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换$

二、原因

package.json 中有个 node-sass 的包，在安装并编译这个的时候出现问题

$vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换$

三、解决办法

node-sass 的主要功能是将 sass/scss -> css ，跟 sass 的作用是一样的， sass 是 dart 语言写的，
直接用 sass 替换掉 node-sass 即可

"sass": "^xx.xx.xx",
"sass-loader": "^xx.xx.xx",

$vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换$

四、其它

在使用 vue create appName 创建 vue 项目，手动配置项目框架内容时，可以手动选择 sass/scss 的插件，之前我都是默认选 node-sass ，现在我只用 sass，让这个编译给烦透了。
$vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换$

五、替换 sass 后需要注意的问题

将 node-sass 替换成 sass 之后，需要注意一个问题：
node-sass 默认支持并包容以下关于除法的写法：

.item{
	width: $widthHole / 4;
}

但 sass dart 版的不包容这个写法：在编译项目的时候会提示：

Recommendation: math.div(($height-message - 20) * 2, 3) or calc(($height-message - 20) * 2 / 3)
More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
702 │                 line-height: ($height-message - 20) * 2/3;
    │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    src\views\Screen\Screen.vue 702:30  root stylesheet

意思是 sass 不推荐直接使用 / 作除法运算，将在以后的版本中摒弃，请改用 math.div() 这种写法。
这也能理解，因为在 css 中已经存在使用 / 的情况，像 font 的缩写：

.title{
    font:italic bold 12px/30px Georgia, serif;
}

所以比如：

.item{
	width: $widthHole / 4;
}

在 dart-sass 中就需要改写为：

@use "sass:math";
.item{
	width: math.div($widthHole, 4);
}

使用 math.div() 需要在 scss 文件的开头引入 @use "sass:math";

scss 的具体使用方法，可以参见： https://kylebing.blog.csdn.net/article/details/89738636

六、结

这样，就可以正常使用 scss/sass 了。文章来源地址https://www.toymoban.com/news/detail-437175.html

到了这里，关于vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换