node16+가 해당 Sass 환경을 구성하는 방법을 빠르게 이해

node-sass 버전이 로컬 node 버전과 다른 경우 오류가 보고됩니다. 그렇다면 Node는 해당 Sass 환경을 어떻게 구성하나요? 이번 글에서는 node16+에서 해당 Sass 환경을 구성하는 방법을 소개하겠습니다.

새 동료가 내 이전 프로젝트를 실행했지만 무슨 일이 있어도 실행할 수 없었습니다. 그는 계속 node-sass 오류를 보고했고 이를 해결하는 데 오랜 시간이 걸렸습니다. 너무 괴로웠다. node-sass的错，搞了好久也没解决，太折磨人了。

发现

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

1、node-sass准确使用

node-sass对应表

参考（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版本，可以适配不同项目环境。

nvm参考：

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

2、更推荐使用dart-sass

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

1、卸载node-sass

발견됨

• 동료의 node 버전과 내 로컬 node버전이 다릅니다. 그는 16+이고 저는 14+입니다. 너무 고통스럽습니다. 데이터를 쿼리한 후 node가 각 버전마다 다른 sass 버전에 해당한다는 것을 발견했습니다.

1. node- sass의 정확한 사용

node-sass 대응표

참조(https:/ /www.npmjs.com /package/node-sass)

노드 16 올바른 버전 상태

• package.json

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

• vue.configl.js전역 변수도 수정해야 합니다

rrreee node-sass와 sass-loader 간의 일치

rrreee🎜노드 관리 도구 nvm을 사용하는 것이 좋습니다🎜

• 이렇게 하면 노드 버전을 자유롭게 전환하고 적응할 수 있습니다. 다양한 프로젝트 환경.

🎜🎜nvm 참조: 🎜🎜https://blog.csdn.net/weixin_44748205/article/details/115118322🎜

2. dart-sass를 사용하는 것이 더 좋습니다

• 향후 주류 방향은 dart-sass를 사용하는 것입니다.

🎜1. node-sass🎜를 제거합니다. 🎜rrreee🎜3을 설치합니다. 경고 문제가 발생하면 🎜문제🎜를 참조하세요. 달성🎜🎜노드 관련 지식을 더 보려면 🎜nodejs 튜토리얼🎜을 방문하세요! ! 🎜

위 내용은 node16+가 해당 Sass 환경을 구성하는 방법을 빠르게 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!