vue ​​node-sass​​ 安装失败,如何解决,使用 ​​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:
Building: C:\Program Files\nodejs\node.exe D:\proj\cscec-8bur-vms\dashboard-vuejs\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli 'D:\\proj\\cscec-8bur-vms\\dashboard-vuejs\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@16.14.0 | win32 | x64

vue node-sass 安装失败,如何解决,使用 sass 替换_json

原因

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

解决办法

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

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

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

替换 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 的具体使用方法,可以参见:​

这样,就可以正常使用 scss/sass 了。