你還在為node-sass煩惱嗎?快試試官方推薦的dart-sass

眾所周知，node-sass 是一個非常棒的工具，是前端工程師組織 CSS 的一個神兵利器。然而，用過的朋友都知道，node-sass 是讓人既愛又恨！你愛它，因為它賦能了 CSS 工程化；你恨它，因為有時候你搞不懂它為什么又出差錯了。我最近就在生產環(huán)境新踩了兩次 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 環(huán)境下提供的一個 Bridge，它提供了調用 LibSass 的能力（而 LibSass 是一個 C++ 實現(xiàn)的樣式預處理器）。

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

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

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

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

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

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

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

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

Compatibility Note

Vite requires Node.js version >=12.0.0.

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

但是，當我運行一些舊項目的時候，我發(fā)現(xiàn)，項目報錯了。

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 不支持當前運行時環(huán)境，我猜這肯定是跟 NodeJS 版本不匹配了。我首先檢查了下我的 NodeJS 版本。

nove?-v
v14.16.0

嗯，是新版本沒錯了。

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

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

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

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

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

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

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

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

即便我已經是在 Docker 容器里執(zhí)行 build 任務了，也就是說沒有上面那個和 Node 版本不兼容的問題，但還是遇到了一次又一次的報錯，這誰能頂?shù)米∧兀?/p>使用Dart Sass

Dart Sass 是 Sass 官網力推的工具，它包括了基于 Dart VM 的命令行工具，以及基于 Node 的純 Javascript 實現(xiàn)。前者說的 Dart VM 就是現(xiàn)在很火的 Flutter 選擇的編程語言 Dart 的虛擬機；而后者的出現(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 這塊，都沒有什么問題，總的來說，使用體驗還是非常棒！

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

眾所周知，在 Vue 項目中，scoped 樣式是會通過一個哈?；膶傩赃x擇器進行隔離的（比如[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 后，可能會在運行開發(fā)環(huán)境時遇到不支持/deep/的問題，需要改用::v-deep，簡寫就是:deep(selector)，比如：

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

你還遇到過哪些 node-sass 的問題呢？不妨留言交流一下！

END

來個【分享、點贊、在看】三連支持一下吧

???“分享、點贊、在看” 支持一波??