因?qū)嶋H項(xiàng)目中安裝node-sass會造成開發(fā)人員首次構(gòu)建項(xiàng)目的時候非常的麻煩，現(xiàn)將棄用node-sass，改用dart-Sass狰闪，這并不會有太多影響之前的代碼
前言
Sass 有三個版本 Dart Sass辛润、libsass 和 Ruby Sass：
- Dart Sass：用 Dart 語言寫的 sass 實(shí)現(xiàn)，于2016年11月1日發(fā)布 alpha 版本崎场，版本1.23.0之后完全支持模塊化機(jī)制佩耳。
- libSass 也就是俗稱的 node-sass，用 c/c++ 實(shí)現(xiàn)的 sass 版本谭跨，使用廣泛干厚，其中 node-sass 是綁定了 libsass的 nodejs 庫李滴，可以極快的將 .scss 文件編譯為 .css 文件，安裝過程很慢蛮瞄，官方也不推薦再使用了所坯。
- Ruby Sass 是最初的 Sass 實(shí)現(xiàn)，但是2019年3月26日被停止了挂捅，以后也不會再支持芹助，使用者需要遷移到別的實(shí)現(xiàn)上
- Sass 官方團(tuán)隊(duì)在2020年10月也正式宣布 Libsass 將棄用，以及基于它的 Node Sass 和 SassC闲先，并且建議用戶使用 Dart Sass状土，主要有以下幾點(diǎn)說明：
不再建議將 LibSass 用于新的 Sass 項(xiàng)目， 改為使用 Dart Sass饵蒂。
建議現(xiàn)有的 LibSass 用戶制定計劃声诸，最終遷移到 Dart Sass，并且所有 Sass 庫都制定計劃退盯，最終放棄對 LibSass 的支持彼乌。
不再計劃向 LibSass 添加任何新功能，包括與新 CSS 功能的兼容性渊迁。
LibSass 和 Node Sass 將在盡力而為的基礎(chǔ)上無限期維護(hù)慰照，包括修復(fù)主要的錯誤和安全問題以及與最新的 Node 版本兼容。
為什么使用 Dart Sass
目前 Dart Sass 已經(jīng)作為 Sass 最新的版本了琉朽，當(dāng)執(zhí)行 npm install sass -D 默認(rèn)使用的是 Dart Sass 包毒租，vue-cli、Vite 腳手架默認(rèn)也是使用最新版本 Dart sass箱叁，而且不需要安裝 node-sass【之前安裝 node-sass 經(jīng)常失敗】
另外墅垮，element-v2.15.7和element-plus 組件庫也是使用 dart dass 模塊的 sass:map 和 @use 重構(gòu)了所有的 SCSS 變量，解決了由 @import 造成的重復(fù)輸出問題耕漱。
所以算色，為了獲得 sass 提供更多更強(qiáng)大的功能，強(qiáng)烈推薦使用 dart sass
安裝使用
1.如果之前安裝了 node-sass螟够，可以先卸載
npm uninstall node-sass
安裝 dart-sass
npm install sass sass-loader -D
2.配置 vue.config.js 文件
// 一般默認(rèn)文件里是沒有這個css配置的, 添加進(jìn)去就好.
module.exports = {
css: {
loaderOptions: {
sass: {
implementation: require('sass'), // This line must in sass option
},
},
}
}
如果版本過高導(dǎo)致報錯灾梦，如提示 TypeError: this.getOptions is not a function，退回 10.+ 可以運(yùn)行成功
npm uninstall sass-loader
npm install sass-loader@^10.1.1 -D
如果項(xiàng)目之前用到 /deep/ 需要替換為 ::v-deep妓笙，全局搜索 /deep/ , 將項(xiàng)目里的 /deep/ 替換為 ::v-deep
element2.x目前只有2.15.7版本是dart-sass若河。所以之前低于2.15.7可直接升到這個版本；
如果目前版本是高于2.15.7不建議降低版本
npm uninstall element-ui
npm install element-ui@2.15.7
如果目前版本是高于2.15.7不建議降低版本寞宫，可參考以下方案：
部分項(xiàng)目因?yàn)閑lement過高或過低萧福，但不能改動element版本的，可能還是會warm(不影響運(yùn)行)
推薦版本
"sass": "1.26.2",
"sass-loader": "^7.3.1",
npm uninstall sass-loader sass
npm install sass-loader@7.3.1 sass@1.26.2
項(xiàng)目中使用了stylelint , 可能需要修改下校驗(yàn)規(guī)則辈赋，在stylelint.config.js 代碼如下
module.exports = {
rules: {
'selector-pseudo-element-no-unknown': [ true,
{
ignorePseudoElements: ['v-deep'],
}
],
},
element的主題warm方案二
手動批量修改（不推薦统锤，以上方案改好正常不需要以下操作）
1.安裝sass-migrator毛俏，
npm install sass-migrator -D
2.在package.json的scripts里添加命令，
"sass-migrator": "sass-migrator division node_modules/element-ui/packages/theme-chalk/src/*.scss"
3.最后執(zhí)行
npm run sass-migrator
