@rsbuild/plugin-stylus

Stylus is an expressive, dynamic, and robust CSS preprocessor. With this plugin, you can use Stylus as the CSS preprocessor in Rsbuild.

Usage

Install:

npm add @rsbuild/plugin-stylus -D

Add plugin to your rsbuild.config.ts:

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

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

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

// 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);

Options

stylusOptions

• Type:

type StylusOptions = {
  use?: string[];
  define?: [string, unknown, 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 Rsbuild's output.sourceMap.css config

Whether to generate source maps.

pluginStylus({
  sourceMap: false,
});

License

MIT.