首頁 > web前端 > js教程 > 主體

快速了解node16+如何配置對應的sass環境

青灯夜游
發布: 2021-12-21 18:59:02
轉載
5698 人瀏覽過

如果node-sass的版本和本地的node版本不同,則會報錯。那麼node如何設定對應的sass環境,以下這篇文章跟大家介紹一下node16 設定對應的sass環境的方法,希望對大家有幫助!

快速了解node16+如何配置對應的sass環境

新同事跑我之前的項目,怎樣都跑不起來,一直報node-sass的錯,搞了好久也沒解決,太折磨人了。

發現

  • 同事版本的node與我本地的node版本不同, 他是16 我是14 ,太折磨人了。經過查詢資料,發現node各個版本對應的sass不同

#1、node-sass準確地使用

##node-sass對應表

參考(https://www.npmjs.com/package/node-sass)

快速了解node16+如何配置對應的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

2、安裝

"sass": "1.32",
"sass-loader": "^10.0.5",
登入後複製

3、遇到警告問題,參考issues

,降級可以實作更多node相關知識,請造訪:

nodejs 教學

! !

以上是快速了解node16+如何配置對應的sass環境的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板