node node-sass sass-loader版本兼容问题
相關(guān)概念
sass
Sass是一種預(yù)處理器腳本語言，可以解釋或編譯成層疊樣式表（CSS）。
Sass包含兩種語法：較舊的語法使用縮進(jìn)將代碼塊和換行符分隔為單獨(dú)的規(guī)則；較新的語法SCSS使用像CSS這樣的塊格式。它使用大括號(hào)來表示代碼塊和分號(hào)來分隔塊中的行。
縮進(jìn)語法和SCSS文件傳統(tǒng)上分別給出擴(kuò)展名.sass和.scss
node-sass
Node-sass是一個(gè)庫，它將Node.js綁定到LibSass（流行樣式表預(yù)處理器Sass的C版本）。它允許用戶以令人難以置信的速度將.scss文件本地編譯為css，并通過連接中間件自動(dòng)編譯。
sass-loader
sass-loader 是一個(gè)webpack 的loader，用于處理項(xiàng)目中的Sass/SCSS 文件。 它的作用是將Sass/SCSS 代碼轉(zhuǎn)換成CSS 代碼，并將其注入到應(yīng)用程序中。
兼容問題
在安裝node-sass的過程中，經(jīng)常會(huì)出現(xiàn)兼容問題，導(dǎo)致安裝失敗，通常是由于node版本、node-sass版本、sass-loader版本不對(duì)應(yīng)導(dǎo)致。
下面是一些推薦的版本對(duì)應(yīng)規(guī)則：
首先是node和node-sass的版本對(duì)應(yīng)規(guī)則：node-sass - npm
| NodeJS | Supported node-sass version | Node Module |
|---|---|---|
| Node 20 | 9.0+ | 115 |
| Node 19 | 8.0+ | 111 |
| Node 18 | 8.0+ | 108 |
| Node 17 | 7.0+, <8.0 | 102 |
| Node 16 | 6.0+ | 93 |
| Node 15 | 5.0+, <7.0 | 88 |
| Node 14 | 4.14+, <9.0 | 83 |
| Node 13 | 4.13+, <5.0 | 79 |
| Node 12 | 4.12+, <8.0 | 72 |
| Node 11 | 4.10+, <5.0 | 67 |
| Node 10 | 4.9+, <6.0 | 64 |
| Node 8 | 4.5.3+, <5.0 | 57 |
| Node <8 | <5.0 | <57 |
然后是node-sass和sass-loader的對(duì)應(yīng)規(guī)則：
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
sass-loader 10.0.1，node-sass 6.0.1
上面是部分對(duì)應(yīng)規(guī)則，首先根據(jù)node版本確定好node-sass的版本，然后再選擇node-sass的版本。
同時(shí)上面只是一部分sass-loader的版本對(duì)應(yīng)，因?yàn)闆]有提供官方的對(duì)應(yīng)規(guī)則，所以上面的版本還是不對(duì)的話，確定好node和node-sass版本之后，可以一個(gè)一個(gè)嘗試sass-loader的版本，所有版本：sass-loader - npm
其它說明
- 出現(xiàn)兼容問題的主要原因在于，早期開發(fā)人員使用比如node12版本，安裝node-sass4+版本和sass-loader4+，可以正常運(yùn)行，但是后期開發(fā)人員使用了更新的node，比如16，而16不支持低版本node-sass。
- 同時(shí)即便切換到低版本node12中可以正常運(yùn)行，但項(xiàng)目中使用了一些node12以上的代碼語法，比如node14才支持的可選鏈語法，然后其它開發(fā)人員拉代碼之后，就要么高版本node無法拉取node-sass包，要么切換低版本無法運(yùn)行一些高版本node才支持的語法。
- 推薦還是使用高版本的node，然后升級(jí)node-sass和sass-loader版本。
其它方法
直接放棄node-sass，使用dart-sass無縫替換。
node-sass與dart-sass區(qū)別：
- node-sass 是用 node (調(diào)用 cpp 編寫的 libsass) 來編譯 sass。
- dart-sass 是用 drat VM 來編譯 sass。
- node-sass 是實(shí)時(shí)自動(dòng)編譯的，dart-sass 需要保存后才會(huì)生效。
- 推薦 dart-sass 性能更好（也是 sass 官方使用的），除了上面的版本對(duì)應(yīng)不上，很多時(shí)候node-sass還因?yàn)閲?guó)情問題經(jīng)常裝不上。
下面是切換方法，使用高版本node，然后根據(jù)下面操作：
1、卸載 node-sass
npm uninstall node-sass
2、安裝 dart sass
npm install sass sass-loader -D
3、將項(xiàng)目中原有的?/deep/?替換為::v-deep，也就這一步麻煩一些，具體需要個(gè)人評(píng)估。
總結(jié)
以上是生活随笔為你收集整理的node node-sass sass-loader版本兼容问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Elasticsearch对接MinIO
- 下一篇： Huggy Lingo: 利用机器学习改