close
  • 简体中文

      • Stylus 插件

      源码

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

      快速开始

      安装插件

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

      npm
      yarn
      pnpm
      bun
      deno
      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

      是否生成 source map 文件。

      pluginStylus({
  sourceMap: false,
});