Stylus

Parcel 通过 @parcel/transformer-stylus 插件自动支持 Stylus 文件。当检测到 .styl 文件时,它将自动安装到您的项目中。

编译后的 Stylus 文件的处理方式与 CSS 相同,这意味着它会为您的浏览器目标进行编译,并应用任何 PostCSS 插件。通过使用 .module.styl 扩展名命名文件,还可以使用 CSS 模块

使用示例

#

在 HTML 文件中引用 Stylus 文件:

<link rel="stylesheet" href="style.styl" />

在 JavaScript 或 TypeScript 中作为 CSS 模块导入 Stylus 文件:

import * as classes from "./style.module.styl";

document.body.className = classes.body;

使用 Parcel CLI 直接编译 Stylus:

parcel build style.styl

配置

#

要配置 Stylus,请创建 .stylusrc 文件。要查看可用的 Stylus 配置选项,请参见官方 Stylus 文档

note:虽然也支持 .stylusrc.js.stylusrc.mjs.stylusrc.cjs 用于基于 JavaScript 的配置,但应尽可能避免使用,因为这会降低 Parcel 缓存的有效性。请改用基于 JSON 的配置格式(例如 .stylusrc)。