Sass 安裝與編譯：Dart Sass 的 CLI、監看與輸出格式

瀏覽器不認得 .scss，所以在寫任何一行 Sass 之前，得先有一套能把它 編譯 成 CSS 的工具。現在的標準答案只有一個：Dart Sass，npm 上的套件名稱就叫 sass。

安裝

npm i -D sass

裝在專案裡（-D 是開發相依），團隊成員 npm i 就會拿到同一個版本。想全域使用也可以：

npm i -g sass
sass --version

不要再裝 node-sass

node-sass 包的是 2020 年就停止維護的 LibSass，不支援 @use 與 內建模組，而且它是原生模組，換一個 Node.js 版本就可能編譯失敗。裝 sass 就對了。

編譯單一檔案

最基本的用法是「來源 冒號 目的地」：

npx sass src/main.scss dist/main.css

也可以只寫來源，讓它輸出到同一層：

npx sass src/main.scss

會產生 src/main.css 與 src/main.css.map 兩個檔案。

編譯整個目錄

來源與目的地都寫目錄，就會整批處理：

npx sass src/scss:dist/css

src/scss 下每一個 .scss 都會在 dist/css 產生對應的 .css。檔名以底線開頭的 分部檔 會被跳過，這正是分檔時要加底線的原因。

監看檔案變動

加上 --watch，存檔後自動重新編譯：

npx sass --watch src/scss:dist/css

寫進 package.json 更省事：

{
  "scripts": {
    "css": "sass --watch src/scss:dist/css",
    "css:build": "sass src/scss:dist/css --style=compressed --no-source-map"
  }
}

輸出格式

--style 有兩個選項：

值	產出	用途
expanded（預設）	一般排版，好讀	開發
compressed	去掉所有空白與換行	正式環境

npx sass src/main.scss dist/main.css --style=compressed

壓縮不等於優化

compressed 只去掉空白，不會幫你合併重複規則或移除沒用到的樣式。產出肥大多半是寫法造成的，見 效能與產出品質。

常用參數

參數	說明
--watch	監看變動並重新編譯
--style=compressed	壓縮輸出
--no-source-map	不產生 .css.map
--load-path=<目錄>	額外的模組搜尋路徑
--quiet-deps	不顯示相依套件送出的警告
--error-css	編譯失敗時仍輸出一份帶錯誤訊息的 CSS

VS Code 的做法

不想碰指令列的話，裝 Live Sass Compiler 擴充套件，開啟 .scss 後點狀態列的 Watch Sass 就會開始監看。設定輸出位置：

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ]
}

團隊專案還是走 npm script

擴充套件的設定存在個人的 VS Code 裡，別人 clone 下來不會有。專案的編譯方式應該寫在 package.json，讓每個人跑出來的結果一致。編輯器相關設定另見 VS Code 必裝擴充套件。

交給建置工具

專案已經在用 Vite 或 Webpack 的話，什麼指令都不用下，裝了 sass 套件之後，直接 import .scss 就會自動編譯：

import "./styles/main.scss";

設定細節與全域變數注入見 與建置工具整合。

常見問題

sass 和 node-sass 該裝哪一個？

裝 sass。它是官方維護的 Dart Sass，純 JavaScript 實作，不需要編譯原生模組。node-sass 包的是已停止維護的 LibSass，不支援模組系統與新的內建模組，安裝時也常在不同 Node.js 版本上失敗。

為什麼編譯後多了一個 .css.map 檔？

那是 source map，讓瀏覽器開發者工具能指出樣式來自哪一個 .scss 檔的第幾行。開發時很有用，正式環境可以用 --no-source-map 關掉，細節見 source map 與 Stylelint。

編譯出來的 CSS 要不要進版控？

通常不要。編譯產物應該在建置流程中重新產生，把它加進 .gitignore 可以避免每次存檔都出現大量無意義的差異，也避免有人直接改到編譯後的檔案。

用建置工具的話還需要 sass CLI 嗎？

不需要另外下指令。Vite 與 Webpack 只要專案裡裝了 sass 套件就會自動處理 .scss，編譯與監看都併進開發伺服器裡，CLI 適合沒有建置工具的靜態網站。

延伸閱讀

Sass 是什麼？語法構成與建置工具整合前端開發工具總覽