如果node-sass的版本和本地的node版本不同,则会报错。那么node如何配置对应的sass环境,下面本篇文章给大家介绍一下node16+配置对应的sass环境的方法,希望对大家有所帮助!

快速了解node16+如何配置对应的sass环境-LMLPHP

发现

  • 同事版本的node与我本地的node版本不同, 他是16+我是14+,太折磨人了。经过查询资料,发现node各个版本对应的sass不同

1、node-sass准确使用

node-sass对应表

参考(https://www.npmjs.com/package/node-sass)

快速了解node16+如何配置对应的sass环境-LMLPHP

node 16正确版本姿势

  • package.json
"node-sass": "^6.0.1",
"sass-loader": "^10.0.1",
登录后复制
  • vue.configl.js全局变量也要修改
loaderOptions: {
  sass: {
    //以下两种都可以
    additionalData: `@import "~@a/scss/entrance.scss";`//sass-laoder 10+版本
    //prependData: `@import "./src/assets/scss/entrance.scss";`// sass-loader 8+版本
  },
登录后复制

node-sass与sass-loader的匹配

sass-loader 4.1.1,node-sass 4.3.0
sass-loader 7.0.3,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.14.1
登录后复制

推荐使用node管理工具nvm

  • 这样我们可以来回自如的切换node版本,可以适配不同项目环境。

2、更推荐使用dart-sass

  • 今后主流方向是dart-sass
  • 使用

1、卸载node-sass
2、安装

"sass": "1.32",
"sass-loader": "^10.0.5",
登录后复制

3、遇到警告问题,参考issues,降级可以实现

更多node相关知识,请访问:nodejs 教程!!

以上就是快速了解node16+如何配置对应的sass环境的详细内容,更多请关注Work网其它相关文章!

09-17 04:48