Stylus
Parcel 支援 Stylus 檔案,自動使用 @parcel/transformer-stylus
外掛。當偵測到 .styl
檔案時,它會自動安裝到您的專案中。
編譯後的 Stylus 檔案也會以與 CSS 相同的方式處理,這表示它會針對您的瀏覽器目標編譯,並套用任何 PostCSS 外掛。您也可以使用 .module.styl
副檔名來命名檔案,以使用 CSS 模組。
範例用法
#在 HTML 檔案中參照 Stylus 檔案
<link rel="stylesheet" href="style.styl" />
在 JavaScript 或 TypeScript 中匯入 Stylus 檔案作為 CSS 模組
import * as classes from './style.module.styl';
document.body.className = classes.body;
使用 Parcel CLI 直接編譯 Stylus
parcel build style.styl
設定
#若要設定 Stylus,請建立一個 .stylusrc
檔案。若要查看可用的 Stylus 設定選項,請參閱官方 Stylus 文件。
注意:.stylusrc.js
、.stylusrc.mjs
和 .stylusrc.cjs
也支援基於 JavaScript 的設定,但應盡可能避免使用,因為它會降低 Parcel 快取的效能。請改用基於 JSON 的設定格式(例如 .stylusrc
)。