Stylus Plugin

Stylus is an Expressive, dynamic and robust CSS preprocessor. This chapter introduces how to use Stylus in Builder.

Quick Start

Install

You can install the plugin with the following command:

npm
yarn
pnpm
bun
npm add @modern-js/builder-plugin-stylus -D

Register

In upper-level frameworks such as Modern.js, you can register Stylus plugin through the builderPlugins config:

import { builderPluginStylus } from '@modern-js/builder-plugin-stylus';

export default {
  builderPlugins: [builderPluginStylus()],
};

When you call the Builder's Node API directly, you can register Stylus plugin with the addPlugins method:

import { builderPluginStylus } from '@modern-js/builder-plugin-stylus';

// add the plugin to the builder instance
builder.addPlugins([builderPluginStylus()]);

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

Config

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.

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

sourceMap

  • Type: boolean
  • Default: isDev

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

builderPluginStylus({
  sourceMap: false,
});