[[401961]]

本文轉(zhuǎn)載自微信公眾號(hào)「前端司南」，作者Tusi。轉(zhuǎn)載本文請聯(lián)系前端司南公眾號(hào)。

眾所周知，node-sass 是一個(gè)非常棒的工具，是前端工程師組織 CSS 的一個(gè)神兵利器。然而，用過的朋友都知道，node-sass 是讓人既愛又恨!你愛它，因?yàn)樗x能了 CSS 工程化;你恨它，因?yàn)橛袝r(shí)候你搞不懂它為什么又出差錯(cuò)了。我最近就在生產(chǎn)環(huán)境新踩了兩次 node-sass 的坑，這讓我下定決心放棄 node-sass。

什么是node-sass?

雖然 node-sass 是一個(gè)熟悉的老朋友了，但是還是有必要介紹一下。

Node-sass is a library that provides binding for Node.js to LibSass, the C++ version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

從上面的介紹可以知道，node-sass 是一個(gè) nodejs 環(huán)境下提供的一個(gè) Bridge，它提供了調(diào)用 LibSass 的能力(而 LibSass 是一個(gè) C++ 實(shí)現(xiàn)的樣式預(yù)處理器)。

ps: 可以看到，node-sass 并不完全是 javascript 實(shí)現(xiàn)的，而是借助了 C++ 的能力，畢竟編譯型語言還是速度快啊。

Round1：安裝 node-sass

剛進(jìn)入前端領(lǐng)域的朋友，可能都問過這么一個(gè)問題：為什么我的 node-sass安裝失敗了?

在網(wǎng)上搜索這個(gè)問題，你會(huì)找到答案，其中一個(gè)是使用 cnpm，但我用過感覺怪怪的，最早是使用 Angular4 時(shí)，執(zhí)行ng eject發(fā)生了很多錯(cuò)誤。

后面就一直用的設(shè)置 npm 淘寶鏡像源的方式處理這個(gè)問題，同時(shí)這也是解決npm install下載卡頓或失敗的一個(gè)技巧，畢竟有些包被墻了。

npm config set registry https://registry.npm.taobao.org

但解決了這個(gè)問題，也不是說就萬事大吉了...

Round2：node-sass和node版本不兼容

一般來說，個(gè)人電腦的 NodeJS 環(huán)境安裝好了后，很久都不會(huì)想著去升級(jí)。

不過我前段時(shí)間去研究 Vite 的時(shí)候，發(fā)現(xiàn)我的 NodeJS 版本已經(jīng)不滿足條件了。

Compatibility Note

Vite requires Node.js version >=12.0.0.

于是乎，我就升級(jí)了 NodeJS 版本。

但是，當(dāng)我運(yùn)行一些舊項(xiàng)目的時(shí)候，我發(fā)現(xiàn)，項(xiàng)目報(bào)錯(cuò)了。

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83) 
For more information on which environments are supported please see: 
https://github.com/sass/node-sass/releases/tag/v4.13.0 

粗略一看，報(bào)錯(cuò)信息說的是 NodeSass 不支持當(dāng)前運(yùn)行時(shí)環(huán)境，我猜這肯定是跟 NodeJS 版本不匹配了。我首先檢查了下我的 NodeJS 版本。

nove -v 
 
v14.16.0 

嗯，是新版本沒錯(cuò)了。

于是就去 github 上查了下 node-sass，發(fā)現(xiàn)確實(shí)還是這么一回事，node-sass@4.13.0 版本真的不支持 node@14，慘!

其實(shí)，我只要把 NodeJS 版本降低到 13，問題也能得以解決。

但我覺得這還是有問題的。新項(xiàng)目要求高版本 NodeJS，而舊項(xiàng)目需要低版本 NodeJS，我本地只有一套 Node 環(huán)境，這樣就出現(xiàn)了矛盾點(diǎn)，看來開發(fā)環(huán)境也比較需要容器化。

經(jīng)大佬提醒，還有 nvm 可以管理 node 版本。

雖然這個(gè)問題也不能完全算是 node-sass 的鍋，但誰叫它不支持 node@14 呢?用著還是不爽!

Round3：node-sass: Command failed

這是我上個(gè)月在生產(chǎn)環(huán)境跑 CI/CD 時(shí)遇到的一個(gè)問題。

error /builds/coollu-r-d/coollu-fe/xkgj_web/node_modules/node-sass: Command failed. 

后面還跟了一堆錯(cuò)誤信息。

即便我已經(jīng)是在 Docker 容器里執(zhí)行 build 任務(wù)了，也就是說沒有上面那個(gè)和 Node 版本不兼容的問題，但還是遇到了一次又一次的報(bào)錯(cuò)，這誰能頂?shù)米∧?

使用Dart Sass

Dart Sass 是 Sass 官網(wǎng)力推的工具，它包括了基于 Dart VM 的命令行工具，以及基于 Node 的純 Javascript 實(shí)現(xiàn)。前者說的 Dart VM 就是現(xiàn)在很火的 Flutter 選擇的編程語言 Dart 的虛擬機(jī);而后者的出現(xiàn)是為了能快速與 Node 環(huán)境下現(xiàn)有的工作流集成，比如 webpack，gulp等。Dart Sass的命令行工具是比 Javascript Library性能更好的，但是為了快速對接 webpack 等工具，我們目前一般通過npm install --save-dev sass直接使用 sass 的 Javascript Library。

改用 Dart Sass 后，不管是安裝還是兼容高版本 Node 這塊，都沒有什么問題，總的來說，使用體驗(yàn)還是非常棒!

Dart Sass 是我們對它的習(xí)慣稱呼，最早它在 npm 上的確是以 dart-sass 的名字發(fā)布的，不過現(xiàn)在它已經(jīng)更名為 sass 了。

換Dart Sass后，我要做些什么

眾所周知，在 Vue 項(xiàng)目中，scoped 樣式是會(huì)通過一個(gè)哈?；膶傩赃x擇器進(jìn)行隔離的(比如[data-v-67c6b990])，如果希望做樣式穿透，在Vue@2中會(huì)用到/deep/深度選擇器。

注意，/deep/本身是作為一個(gè) CSS 的提案(好像是用于解決 web components 的樣式穿透問題，用 Angular 的時(shí)候簡單了解過)，后面又被廢棄了，而 Vue 的 /deep/跟 CSS 的/deep/不是同一個(gè)概念!考慮到用戶容易誤解 Vue 的/deep/和 CSS 被廢棄的/deep/提案是一個(gè)東西，也就會(huì)誤認(rèn)為 /deep/是一個(gè)不可用的特性，Vue 也出了 RFC 針對這塊做調(diào)整，后面也就有了::v-deep。

使用 Dart Sass 后，可能會(huì)在運(yùn)行開發(fā)環(huán)境時(shí)遇到不支持/deep/的問題，需要改用::v-deep，簡寫就是:deep(selector)，比如：

:deep(.foo) { 
  position: relative; 
}