Stylus Plugin

Stylus is an Expressive, dynamic and robust CSS preprocessor. With Stylus plugins, you can use Stylus as the CSS preprocessor.

Quick Start

Install Plugin

You can install the plugin using the following command:

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

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

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

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

Example

After registering the plugin, you can import *.styl, *.stylus, *.module.styl or *.module.stylus files into the code without adding other configs.

  • normalize.styl:
the 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);

Options

If you need to customize the compilation behavior of Stylus, you can use the following configs.

stylusOptions

-Type:

type StylusOptions = {
  use?: string[];
  include?: string;
  import?: string;
  resolveURL?: boolean;
  lineNumbers?: boolean;
  hoistAtrules?: boolean;
};
  • Default: undefined

Options passed to Stylus, please refer to the Stylus documentation for specific usage.

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

sourceMap

Whether to generate source map.

pluginStylus({
  sourceMap: false,
});