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

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 installing the plugin, you can directly import *.styl or *.module.styl 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#

• Type: boolean
• Default: isDev

Whether to generate Source Map, enabled by default in the development environment.

pluginStylus({
  sourceMap: false,
});