Stylus 插件

Stylus 是一个富于表现力、动态的、健壮的 CSS 预处理器;通过 Stylus 插件,你可以使用 Stylus 作为 CSS 预处理器。

快速开始

安装插件

你可以通过如下的命令安装插件:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-stylus -D

注册插件

你可以在 rsbuild.config.ts 文件中注册插件:

rsbuild.config.ts
import { pluginStylus } from '@rsbuild/plugin-stylus';

export default {
  plugins: [pluginStylus()],
};

示例

注册插件后,你可以在代码中引入 *.styl*.stylus*.module.styl*.module.stylus 文件,无须添加其他配置。

  • normalize.styl:
body
  color #000
  font 14px Arial, sans-serif
  • title.module.styl:
.title
  font-size: 14px;
  • index.js:
import './normalize.styl';
import style from './title.module.styl';

console.log(style.title);

选项

如果你需要自定义 Stylus 的编译行为,可以使用以下配置项。

stylusOptions

  • 类型:
type StylusOptions = {
  use?: string[];
  include?: string;
  import?: string;
  resolveURL?: boolean;
  lineNumbers?: boolean;
  hoistAtrules?: boolean;
};
  • 默认值: undefined

传递给 Stylus 的选项,请查阅 Stylus 文档 来了解具体用法。

pluginStylus({
  stylusOptions: {
    lineNumbers: false,
  },
});

sourceMap

是否生成 source map 文件。

pluginStylus({
  sourceMap: false,
});