#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 add @rsbuild/plugin-stylus -D

yarn add @rsbuild/plugin-stylus -D

pnpm add @rsbuild/plugin-stylus -D

bun add @rsbuild/plugin-stylus -D

deno add npm:@rsbuild/plugin-stylus -D

#Register plugin

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

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

To customize the compilation behavior of Stylus, use the following options.

#stylusOptions

-Type:

type StylusOptions = {
  use?: string[];
  define?: [string, any, boolean?][];
  include?: string[];
  includeCSS?: boolean;
  import?: string[];
  resolveURL?: boolean;
  lineNumbers?: boolean;
  hoistAtrules?: boolean;
};

• Default: undefined

These options are passed to Stylus. For details, see the Stylus documentation.

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

#sourceMap

• Type: boolean
• Default: the same as output.sourceMap.css

Whether to generate source map.

pluginStylus({
  sourceMap: false,
});