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
文件,无须添加其他配置。
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 的编译行为,可以使用以下配置项。
type StylusOptions = {
use?: string[];
include?: string;
import?: string;
resolveURL?: boolean;
lineNumbers?: boolean;
hoistAtrules?: boolean;
};
undefined
传递给 Stylus 的选项,请查阅 Stylus 文档 来了解具体用法。
builderPluginStylus({
stylusOptions: {
lineNumbers: false,
},
});
boolean
isDev
是否生成 Source Map,默认在开发环境下启用。
builderPluginStylus({
sourceMap: false,
});