建站
咨詢
售后
建站咨詢
新聞中心
[[401961]]
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比鎮(zhèn)雄網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鎮(zhèn)雄網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鎮(zhèn)雄地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
本文轉(zhuǎn)載自微信公眾號(hào)「前端司南」，作者Tusi。轉(zhuǎn)載本文請(qǐng)聯(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性能更好的，但是為了快速對(duì)接 webpack 等工具，我們目前一般通過npm install --save-dev sass直接使用 sass 的 Javascript Library。
改用 Dart Sass 后，不管是安裝還是兼容高版本 Node 這塊，都沒有什么問題，總的來說，使用體驗(yàn)還是非常棒!
Dart Sass 是我們對(duì)它的習(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 針對(duì)這塊做調(diào)整，后面也就有了::v-deep。
使用 Dart Sass 后，可能會(huì)在運(yùn)行開發(fā)環(huán)境時(shí)遇到不支持/deep/的問題，需要改用::v-deep，簡寫就是:deep(selector)，比如：
- :deep(.foo) {
- position: relative;
- }
網(wǎng)站標(biāo)題：你還在為Node-Sass煩惱嗎？快試試官方推薦的Dart-Sass
鏈接地址：http://www.5511xx.com/article/dpehgoe.html
