How to configure the corresponding sass environment for node16+

Xiaobian to share with you node16+ how to configure the corresponding sass environment, I hope you have something to gain after reading this article, let's discuss it together!

The new colleague ran my previous project, but he couldn't run it no matter how hard he tried. He kept reporting node-sass mistakes. He didn't solve it after a long time. It was too torturous.

found

My colleague's version of node is different from my local version of node, he is 16+ and I am 14+, which is too torturous. After querying the data, we found that the sass corresponding to each version of node is different.

1. Node-sass is used accurately

node-sass correspondence table

node 16 correct version posture

package.json

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

vue.configl.js global variable also needs to be modified

loaderOptions: { sass: { //Both of the following are possible additionalData: `@import "~@a/scss/entrance.scss";`//sass-laoder Version 10+ //prependData: `@import "./ src/assets/scss/entrance.scss";`// sass-loader 8+ version},

node-sass and sass-loader matching

sass-loader 4.1.1，node-sass 4.3.0sass-loader 7.0.3，node-sass 4.7.2sass-loader 7.3.1，node-sass 4.7.2sass-loader 7.3.1，node-sass 4.14.1

Recommended node management tool nvm

This way we can switch node versions back and forth freely and adapt to different project environments.

2. Dart-Sass is recommended

The mainstream direction in the future is dart-sass

use

1. Unload node-sass

2. Installation

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

3, encountered warning problems, refer to issues, downgrade can be achieved

After reading this article, I believe you have a certain understanding of "node16+ how to configure the corresponding sass environment". If you want to know more about it, please pay attention to the industry information channel. Thank you for reading!