#Stylus 插件

Stylus 是一个富于表现力、动态的、健壮的 CSS 预处理器，本章节介绍如何在 Builder 中使用 Stylus。

#快速开始

#安装插件

你可以通过如下的命令安装插件:

# npm
npm install @modern-js/builder-plugin-stylus -D

# yarn
yarn add @modern-js/builder-plugin-stylus -D

# pnpm
pnpm install @modern-js/builder-plugin-stylus -D

#注册插件

在 Modern.js / EdenX 等上层框架中，你可以通过 builderPlugins 配置项来注册 Stylus 插件：

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

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

当你直接调用 Builder 的 Node API 时，可以通过 addPlugins 方法来注册 Stylus 插件：

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

// 往 builder 实例上添加插件
builder.addPlugins([builderPluginStylus()]);

#示例

安装完插件后，你可以直接在代码中引入 *.styl 或 *.module.styl 文件，无须添加其他配置。

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

#配置

如果你需要自定义 Stylus 的编译行为，可以使用以下配置项。

#stylusOptions

• 类型：

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

• 默认值： undefined

传递给 Stylus 的选项，请查阅 Stylus 文档 来了解具体用法。

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

#sourceMap

• 类型： boolean
• 默认值： isDev

是否生成 Source Map，默认在开发环境下启用。

builderPluginStylus({
  sourceMap: false,
});