close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo

插件列表

总览
React 插件
SVGR 插件
Vue 插件
Preact 插件
Svelte 插件
Solid 插件
Babel 插件
Sass 插件
Less 插件
Stylus 插件

开发

插件开发
插件 API
插件 hooks
📝 在 GitHub 上编辑此页
上一页Less 插件
下一页插件开发

#Stylus 插件

Source

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[];
  define?: [string, any, boolean?][];
  include?: string[];
  includeCSS?: boolean;
  import?: string[];
  resolveURL?: boolean;
  lineNumbers?: boolean;
  hoistAtrules?: boolean;
};
  • 默认值: undefined

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

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

#sourceMap

  • 类型: boolean
  • 默认值: 与 output.sourceMap.css 一致

是否生成 source map 文件。

pluginStylus({
  sourceMap: false,
});