Dart Sass 遷移筆記：node-sass 之後怎麼裝 Sass

之前寫過安裝 node-sass 與 sass-loader 的筆記。

node-sass 是 LibSass 的 Node.js 綁定，目前兩者都已停止維護。現在 Sass 官方主要使用 Dart Sass，npm 套件名稱是 sass，另外也提供效能較好的 sass-embedded。

安裝 Dart Sass

一般情況可以直接安裝：

npm install -D sass

以前的：

npm install -D node-sass

現在不建議再使用。

webpack

webpack 仍然需要 sass-loader 作為 Sass 與 webpack 之間的轉接：

npm install -D sass-loader sass

基本設定：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

sass-loader 會使用專案安裝的 Sass implementation。

現在支援：

sass-embedded
sass

如果兩者都有安裝，會優先使用 sass-embedded。

通常不需要自己設定 implementation；真的需要指定時才另外設定。

Vite

Vite 本身已經支援 .scss 與 .sass，不需要另外安裝 Vite 專用的 Sass plugin。

只需要安裝 Sass compiler：

npm install -D sass

接著直接使用：

import './style.scss'

Vue SFC 也可以直接：

<style lang="scss">
.page {
  // ...
}
</style>

如果比較在意編譯效能，現在 Vite 官方建議使用：

npm install -D sass-embedded

Vite 會優先使用 sass-embedded，沒有安裝時再使用 sass。

為什麼 node-sass 常卡 Node.js 版本？

node-sass 使用的是 LibSass，並透過原生 Node.js binding 執行。

因此以前很容易遇到：

Node.js 升版
↓
node-sass 沒有對應 binary
↓
node-gyp 開始編譯
↓
npm install 失敗

Windows 上還可能進一步遇到 Python、Visual Studio Build Tools 等環境問題。

現在的 sass 不再依賴 node-sass 那套原生 binding，因此不會再因為 Node ABI 對不上，而需要等待特定版本的 node-sass binary。

這不代表 Sass 完全沒有 Node.js 版本需求，而是少掉以前最麻煩的原生編譯相容問題。

sass 與 sass-embedded

現在主要有兩種選擇：

一般專案使用 sass 就可以。

如果是 Vite 或較大型的 Sass 專案，也可以優先考慮：

npm install -D sass-embedded

和 node-sass 的差異

小結

舊專案如果還看到：

npm install node-sass

現在基本上可以先想到改成：

npm install -D sass

webpack：

npm install -D sass-loader sass

Vite：

npm install -D sass

或需要較好效能時：

npm install -D sass-embedded

重點不是 Sass 消失了，而是底層已經從 node-sass / LibSass 換成官方持續維護的 Dart Sass。

參考資料

• Sass：Node Sass is end-of-life
• Sass：LibSass Has Reached End-Of-Life
• Sass：Dart Sass
• webpack：sass-loader
• Vite：CSS Pre-processors