Stylus 插件
Stylus 是一个富于表现力、动态的、健壮的 CSS 预处理器,本章节介绍如何在 Builder 中使用 Stylus。
快速开始
安装插件
你可以通过如下的命令安装插件:
npm add @modern-js/builder-plugin-stylus -D
注册插件
在 Modern.js 等上层框架中,你可以通过 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
文件,无须添加其他配置。
body
color #000
font 14px Arial, sans-serif
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;
};
传递给 Stylus 的选项,请查阅 Stylus 文档 来了解具体用法。
builderPluginStylus({
stylusOptions: {
lineNumbers: false,
},
});
sourceMap
是否生成 Source Map,默认在开发环境下启用。
builderPluginStylus({
sourceMap: false,
});