Home  >  Article  >  Web Front-end  >  Quickly understand how node16+ configures the corresponding sass environment

Quickly understand how node16+ configures the corresponding sass environment

青灯夜游
青灯夜游forward
2021-12-20 18:20:175682browse

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!

Quickly understand how node16+ configures the corresponding sass environment

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)

Quickly understand how node16+ configures the corresponding sass environment

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!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete