快速了解node16+如何配置對(duì)應(yīng)的sass環(huán)境

如果node-sass的版本和本地的node版本不同，則會(huì)報(bào)錯(cuò)。那么node如何配置對(duì)應(yīng)的sass環(huán)境，下面本篇文章給大家介紹一下node16+配置對(duì)應(yīng)的sass環(huán)境的方法，希望對(duì)大家有所幫助！

新同事跑我之前的項(xiàng)目，怎樣都跑不起來，一直報(bào)node-sass的錯(cuò)，搞了好久也沒解決，太折磨人了。

發(fā)現(xiàn)

• 同事版本的node與我本地的node版本不同, 他是16+我是14+,太折磨人了。經(jīng)過查詢資料，發(fā)現(xiàn)node各個(gè)版本對(duì)應(yīng)的sass不同

1、node-sass準(zhǔn)確使用

node-sass對(duì)應(yīng)表

參考（https://www.npmjs.com/package/node-sass）

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版本，可以適配不同項(xiàng)目環(huán)境。

nvm參考：

https://blog.csdn.net/weixin_44748205/article/details/115118322

2、更推薦使用dart-sass

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

1、卸載node-sass
2、安裝

"sass": "1.32", "sass-loader": "^10.0.5",

3、遇到警告問題，參考issues，降級(jí)可以實(shí)現(xiàn)