華為云鯤鵬環境部署前端Vue項目——node-sass異常報錯

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

node-sass異常報錯

報錯分析：

同樣的代碼、同樣的node-sass版本

同樣的型號、規格、帶寬的服務器

同樣的部署方式、同一個人在操作

。。。

在那焦慮的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

樣式的兼容性問題

解決方案

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

npm uninstall -S node-sass npm install -S -D sass

替換 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通道DDR4、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

詳情可查看鏈接

硬件方面的知識本文不做過多分析，感興趣的讀者可自行查閱相關資料。

到此問題出現的原因和解決問題的方案，文中都已詳細介紹。

如發現問題或者錯誤，歡迎隨時指正。

Sass web前端 鯤鵬

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。