[[401961]]

本文轉載自微信公眾號「前端司南」，作者Tusi。轉載本文請聯系前端司南公眾號。

眾所周知，node-sass 是一個非常棒的工具，是前端工程師組織 CSS 的一個神兵利器。然而，用過的朋友都知道，node-sass 是讓人既愛又恨!你愛它，因為它賦能了 CSS 工程化;你恨它，因為有時候你搞不懂它為什么又出差錯了。我最近就在生產環境新踩了兩次 node-sass 的坑，這讓我下定決心放棄 node-sass。

什么是node-sass?

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

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 是一個 nodejs 環境下提供的一個 Bridge，它提供了調用 LibSass 的能力(而 LibSass 是一個 C++ 實現的樣式預處理器)。

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

Round1：安裝 node-sass

剛進入前端領域的朋友，可能都問過這么一個問題：為什么我的 node-sass安裝失敗了?

在網上搜索這個問題，你會找到答案，其中一個是使用 cnpm，但我用過感覺怪怪的，最早是使用 Angular4 時，執行ng eject發生了很多錯誤。

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

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

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

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

一般來說，個人電腦的 NodeJS 環境安裝好了后，很久都不會想著去升級。

不過我前段時間去研究 Vite 的時候，發現我的 NodeJS 版本已經不滿足條件了。

Compatibility Note

Vite requires Node.js version >=12.0.0.

于是乎，我就升級了 NodeJS 版本。

但是，當我運行一些舊項目的時候，我發現，項目報錯了。

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 

粗略一看，報錯信息說的是 NodeSass 不支持當前運行時環境，我猜這肯定是跟 NodeJS 版本不匹配了。我首先檢查了下我的 NodeJS 版本。

nove -v 
 
v14.16.0 

嗯，是新版本沒錯了。

于是就去 github 上查了下 node-sass，發現確實還是這么一回事，node-sass@4.13.0 版本真的不支持 node@14，慘!

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

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

經大佬提醒，還有 nvm 可以管理 node 版本。

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

Round3：node-sass: Command failed

這是我上個月在生產環境跑 CI/CD 時遇到的一個問題。

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

后面還跟了一堆錯誤信息。

即便我已經是在 Docker 容器里執行 build 任務了，也就是說沒有上面那個和 Node 版本不兼容的問題，但還是遇到了一次又一次的報錯，這誰能頂得住呢?

使用Dart Sass

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

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

Dart Sass 是我們對它的習慣稱呼，最早它在 npm 上的確是以 dart-sass 的名字發布的，不過現在它已經更名為 sass 了。

換Dart Sass后，我要做些什么

眾所周知，在 Vue 項目中，scoped 樣式是會通過一個哈希化的屬性選擇器進行隔離的(比如[data-v-67c6b990])，如果希望做樣式穿透，在Vue@2中會用到/deep/深度選擇器。

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

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

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