在 vite 项目中配置 stylus，需要安装 @vitejs/plugin-vue（若使用 vue）或 @vitejs/plugin-react 等框架插件以及 vite-plugin-stylus 依赖，并在 vite.config.js 中通过 css.preprocessoroptions 注入全局变量。这样配置后，vite 即可自动处理 .styl 文件，并支持在样式中使用预定义的常量。
Vite 如何集成 Stylus 预处理功能
要启用 Stylus 支持，必须安装专用的 Vite 插件 vite-plugin-stylus，因为 Vite 核心仅内置了 Sass、Less 和 PostCSS 的支持。安装完成后，在配置文件中使用该插件，并通过 stylus.use() 方法注册必要的 Stylus 插件（如 nib），从而实现完整的预处理能力。
import { defineConfig } from 'vite';
import stylusPlugin from 'vite-plugin-stylus';
import stylus from 'stylus';
export default defineConfig({
plugins: [stylusPlugin()],
css: {
preprocessorOptions: {
stylus: {
imports: ['./src/styles/variables.styl'],
use: [require('nib')()]
}
}
}
});
上述代码展示了基础配置结构。通过 imports 数组，可以将包含颜色、尺寸等常量的 variables.styl 文件注入到所有 Stylus 文件中，避免在每个组件中重复导入。同时，use 字段允许加载 nib 等扩展库，提供 vendor-prefixes 等便捷函数。
如何在 Stylus 中定义和使用全局变量
全局变量的定义依赖于 Stylus 的导入机制和 Vite 的预处理选项。通过在 vite.config.js 中指定 imports 路径，Vite 会在编译前自动将这些变量注入到每个 .styl 文件的顶部。这种方式比手动在每个文件中写 @import 更高效且不易出错。
// src/styles/variables.styl $primary-color = #3498db $font-size-base = 16px body font-size $font-size-base color $primary-color
在 variables.styl 中，使用 $ 符号定义变量。这些变量在后续的组件样式中可以直接引用，无需再次导入。例如，在 App.styl 中直接使用 $primary-color 即可应用定义的颜色。这种机制确保了样式的一致性，并简化了主题切换的实现。
Stylus 配置中 nib 插件的作用是什么
nib 是 Stylus 的一个常用扩展库，它提供了许多实用的 CSS 函数和 mixin。在 Vite 配置中通过 use: [require('nib')()] 引入后，开发者可以在样式中直接使用 vendor-prefixes 来自动添加浏览器前缀，或使用 reset 来重置默认样式。这减少了手写兼容代码的工作量，提升了开发效率。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
