Stylus

Parcel 使用 @parcel/transformer-stylus 插件自动支持 Stylus 文件。当检测到 .styl 文件时，它将自动安装到你的项目中。

¥Parcel supports Stylus files automatically using the @parcel/transformer-stylus plugin. When a .styl file is detected, it will be installed into your project automatically.

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

¥Compiled Stylus files are also processed the same way as CSS, which means it is compiled for your browser targets, and any PostCSS plugins are also applied. CSS modules can also be used by naming your file with the .module.styl extension.

用法示例

¥Example usage

在 HTML 文件中引用 Stylus 文件：

¥Referencing a Stylus file in an HTML file:

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

在 JavaScript 或 TypeScript 中将 Stylus 文件导入为 CSS 模块：

¥Importing a Stylus file as a CSS module in JavaScript or TypeScript:

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

document.body.className = classes.body;

使用 Parcel CLI 直接编译 Stylus

¥Directly compiling Stylus using the Parcel CLI

parcel build style.styl

配置

¥Configuration

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

¥To configure Stylus, create a .stylusrc file. To see the available options to configure stylus see the official Stylus documentation.