Quickly understand how node16+ configures the corresponding sass environment

If the node-sass version is different from the local node version, an error will be reported. So how does node configure the corresponding sass environment? This article will introduce to you how to configure the corresponding sass environment in node16. I hope it will be helpful to you!

My new colleague tried to run my previous project, but it couldn’t run no matter what. He kept reporting node-sass errors, and it took a long time. It’s unresolved, it’s so torturous.

I found that

• ’s colleague’s version of node is different from my local node version, he is 16 I am14 , it’s so torturous. After querying the information, I found that sass corresponding to each version of node is different

1. Use node-sass accurately

node-sass correspondence table

##Reference (https://www.npmjs.com/package/node-sass)

node 16 correct version posture

package.json

• "node-sass": "^6.0.1",
  "sass-loader": "^10.0.1",

• vue.configl .jsGlobal variables must also be modified

loaderOptions: {
  sass: {
    //以下两种都可以
    additionalData: `@import "~@a/scss/entrance.scss";`//sass-laoder 10+版本
    //prependData: `@import "./src/assets/scss/entrance.scss";`// sass-loader 8+版本
  },

The matching between node-sass and 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

It is recommended to use the node management tool nvm

so that we can switch node versions back and forth freely and adapt to different project environments.

nvm reference:

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

2. It is more recommended to use dart-sass

The mainstream direction in the future is
• dart-sass
Use

1 , uninstall

node-sass2, install

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

3, encounter warning issues, refer to

issues, downgrade can achieve

More For more node-related knowledge, please visit:

nodejs tutorial! !

The above is the detailed content of Quickly understand how node16+ configures the corresponding sass environment. For more information, please follow other related articles on the PHP Chinese website!