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

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

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: 1Command: node scripts/build.jsArguments:Directory: D:\proj\cscec-8bur-vms\dashboard-vuejs\node_modules\node-sassOutput: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 okgyp 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.0gyp info using node@16.14.0 | win32 | x64

原因

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

解决办法

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

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

替换 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: ╷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 了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。