node-sass to dart-sass

背景:華爲雲服務器部署前端項目遷移至華爲雲鯤鵬環境部署，項目啓動node-sass異常報錯

node-sass異常報錯

報錯分析：

1. 一樣的代碼、一樣的node-sass版本
2. 一樣的型號、規格、帶寬的服務器
3. 一樣的部署方式、同一我的在操做

。。。

在那焦慮的3分之一天裏，筆者真的在懷疑還能不能再搞下去？。。。
可是所幸有大佬的幫助，找尋了替代方案dart-sass,對dart-sass以前沒有接觸過，到底可否替代node-sass,仍是保持懷疑態度。帶着這些疑問和期待，慢慢開始挖掘。

替代方案

根據dart-sass中文官網給出的定義：

Dart Sass 是 Sass 的主要實現版本，這意味着它集成新 功能要早於任何其它的實現版本。Dart Sass 速度快、易於安裝，而且 能夠被編譯成純 JavaScript 代碼，這使得它很容易集成到現代 web 的開發流程中。

Dart Sass 的獨立命令行可執行文件是跑在高速的 Dart 虛擬機（VM）上來編譯你的樣式代碼的，若是您在Dart-VM內運行Dart-Sass,它的運行速度很快；並且它能夠被編譯成純JS並在 npm 上做爲 sass 軟件包 發佈.做爲編譯版本的dart-sass，相較於node-sass執行速度慢，可是它很容易集成到現有的工做流中來。

Sass簡單介紹

Sass是一種CSS的預編譯語言。它提供了 變量（variables）、嵌套（nested rules）、 混合（mixins）、 函數（functions）等功能，而且徹底兼容 CSS 語法。Sass 可以幫助複雜的樣式表更有條理， 而且易於在項目內部或跨項目共享設計。

變量（variables）

變量是存儲信息並在未來重複利用的一種方式，在整個樣式表中均可訪問。 你能夠在變量中存儲顏色、字體 或任何 CSS 值，並在未來重複利用。Sass 使用 $ 符號 做爲變量的標誌。例如：

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
複製代碼

嵌套（nested rules）

在編寫 HTML 時，您可能已經注意到它有一個清晰的嵌套和可視化層次結構。 而 CSS 則沒有。

Sass 容許您嵌套 CSS 選擇器，嵌套方式 與 HTML 的視覺層次結構相同。請注意，過分嵌套的規則 將致使過分限定的 CSS，這些 CSS 可能很難維護，而且 一般被認爲是很差的作法 。
示例代碼：

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

複製代碼

混合（mixins）

在編寫某些CSS時代碼冗餘不少，特別是CSS3帶前綴的樣式。混合的組聲明方式，能讓你使用起來更加的靈活。
示例代碼：

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))
複製代碼

函數（functions）

在 CSS 中常常須要作數學計算。Sass 支持一些標準的 數學運算符，例如 +、-、*、/ 和 %。 代碼示例：

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%
複製代碼

更多內容細節感興趣的讀者可點擊連接查看詳情dart-sass中文網

問題解決

解決思路

• 使用dart-sass替換掉node-sass
• 樣式的兼容性問題

解決方案

1. 移除當前項目node-sass,安裝dart-sass

npm uninstall -S node-sass 
npm install -S -D sass 
複製代碼

2. 替換 node-sass 以後有一個地方須要注意，就是它再也不支持以前 sass 的那種 /deep/ 寫法，須要統一改成 ::v-deep 的寫法。相關狀況查看：issue

示例代碼：

.a {
  /deep/ {
    .b {
      color: red;
    }
  }
}

/* 修改成 */
.a {
  ::v-deep {
    .b {
      color: red;
    }
  }
}
複製代碼

無論你是否使用dart-sass，我都是建議你使用::v-deep的寫法，它不只兼容了 css 的>>>寫法，還兼容了 sass /deep/的寫法。
全局修改從新啓動項目，完美運行。

詳情可查看連接Node Sass to Dart Sass不兼容

node-sass

---

Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

這是節選自目前最新版本v5.0.0官方指南給出的說明，大勢所趨dart-sass終將會成爲主流。
到此爲止，問題已經得以解決，可是問題出現的緣由接着來分析，矛頭直指華爲-鯤鵬雲環境。

鯤鵬雲是什麼？

鯤鵬雲是以 鯤鵬920 處理器爲核心的雲服務器 ，鯤鵬920處理器兼容ARM架構，採用7nm工藝製造，能夠支持32/48/64個內核，主頻可達2.6GHz，支持8通道DDR四、PCIe 4.0和100G RoCE網絡。
相比於 傳統X86 服務器，高性能和低功耗成爲他突出的特色。
詳情查看鯤鵬社區

這裏遺留了一個點，就是在購買ECS彈性雲服務器時，選擇的CPU架構鯤鵬環境選擇的是鯤鵬計算，也就是說服務器的處理器是ARM架構的鯤鵬920

CPU架構說明

• x86計算

x86 CPU架構採用複雜指令集（CISC），CISC指令集的每一個小指令能夠執行一些較低階的硬件操做，指令數目多並且複雜，每條指令的長度並不相同。因爲指令執行較爲複雜因此每條指令花費的時間較長。

• 鯤鵬計算

鯤鵬CPU架構採用RISC精簡指令集（RISC），RISC是一種執行較少類型計算機指令的微處理器，它可以以更快的速度執行操做，使計算機的結構更加簡單合理地提升運行速度，相對於X86 CPU架構具備更加均衡的性能功耗比。 鯤鵬CPU架構的優點是高密度低功耗，能夠提供更高的性價比，知足重載業務場景使用。

到此問題彷佛已經很明顯，正是CPU架構不一樣引發的 ARM VS X86

查詢node-sass v4.14.1 支持環境驗證了以上結論
Supported Environments

*Linux support refers to Ubuntu, Debian, and CentOS 5+
** Not available on CentOS 5
^ Only available on x64
複製代碼

詳情可查看連接

硬件方面的知識本文不作過多分析，感興趣的讀者可自行查閱相關資料。 到此問題出現的緣由和解決問題的方案，文中都已詳細介紹。 如發現問題或者錯誤，歡迎隨時指正。