Stylus 是什么 & 核心作用
Stylus 是一款CSS 预处理器 （和 Less、Sass 同类型），专为前端开发设计，核心作用是：用更简洁、更灵活的语法写 CSS，最终编译成浏览器能识别的原生 CSS。
你可以把它理解为 CSS 的「升级版」------ 解决了原生 CSS 没有变量、嵌套、函数等编程特性的痛点，让样式开发更高效、易维护。
1. 核心功能（新手最常用）
（1）极简的语法（可选省略大括号 / 分号 / 冒号）
原生 CSS 写法：
css
.box {
width: 100px;
height: 200px;
background: #fff;
}
.box .title {
font-size: 16px;
}Stylus 极简写法（完全等价）：
stylus
.box
width 100px
height 200px
background #fff
.title
font-size 16px👉 优势：少写大量重复符号，代码更简洁。
（2）变量（统一管理样式值）
stylus
// 定义变量
primary-color = #1890ff // 主题色
base-font-size = 14px // 基础字号
// 使用变量
.button
color primary-color
font-size base-font-size👉 优势：改样式时只需改变量，不用全局替换，适配主题切换超方便。
（3）嵌套（解决 CSS 选择器重复）
stylus
.nav
height 50px
ul
list-style none
li
float left
a
display block
padding 0 10px
&:hover // & 代表父选择器（这里是 a）
color red👉 优势：层级清晰，避免写 .nav ul li a 这类冗长选择器。
（4）混合 / 函数（复用样式片段）
stylus
// 定义混合（类似函数）
border-radius(val)
-webkit-border-radius val
-moz-border-radius val
border-radius val
// 使用
.card
border-radius 8px // 等价于写了3行兼容代码👉 优势：避免重复写兼容前缀、通用样式，减少代码量。
2. 实际使用流程
- 项目中安装 Stylus：
npm install stylus stylus-loader --save-dev（需配合 webpack/vite 等构建工具）； - 新建
.styl/.stylus后缀的文件，用 Stylus 语法写样式； - 构建工具（如 vite/webpack）通过
stylus-loader将 Stylus 编译成.css文件； - 浏览器最终加载编译后的原生 CSS。
3. 适用场景
- 中大型前端项目（React/Vue/Angular 等），需要统一管理样式、减少冗余；
- 需适配多主题、多端样式的项目；
- 追求代码简洁、易维护的团队。
总结
- Stylus 是 CSS 预处理器，核心是用更高效的语法写 CSS，最终编译为原生 CSS；
- 核心优势：极简语法、变量、嵌套、混合函数，大幅提升样式开发效率；
- 现在 npm 5+ 后安装时
--save可省略，但stylus-loader作为开发依赖，建议用--save-dev（-D）安装。
下面我给你提供一个 Vite + Vue3 项目中配置 Stylus 的完整可运行示例，包含从安装到使用的全流程，新手也能直接上手。
一、前置条件
确保你已经初始化了 Vite + Vue3 项目（如果没有，先执行下面的命令）：
bash
运行
# 初始化 Vue3 项目（按提示选择 Vue + JavaScript/TypeScript）
npm create vite@latest my-stylus-project -- --template vue
cd my-stylus-project二、安装依赖
Stylus 需要安装两个核心包：stylus（编译核心）和 stylus-loader（Vite 加载器），作为开发依赖安装：
bash
运行
# 安装 Stylus 相关依赖（--save-dev 可简写为 -D）
npm install stylus stylus-loader --save-dev三、Vite 配置（无需额外配置！）
Vite 对 Stylus 有内置支持 ，安装依赖后无需修改 vite.config.js，直接就能使用 .styl/.stylus 文件。
如果你的 vite.config.js 有其他配置，保持默认即可，示例：
javascript
运行
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
// 无需额外配置 Stylus，Vite 会自动识别
})四、实际使用示例
1. 单文件组件（.vue）内使用 Stylus
修改 src/App.vue，在 <style> 标签中指定 lang="stylus"：
vue
<template>
<div class="app-container">
<h1 class="title">Stylus 示例</h1>
<button class="btn">点击我</button>
</div>
</template>
<script setup>
// 脚本逻辑（无特殊修改）
</script>
<!-- 指定 lang="stylus" 即可使用 Stylus 语法 -->
<style lang="stylus" scoped>
// 1. 定义变量
primary-color = #1890ff // 主题色
danger-color = #ff4d4f // 危险色
base-padding = 16px // 基础内边距
// 2. 嵌套语法
.app-container
width 100%
max-width 1200px
margin 0 auto
padding base-padding
// 嵌套子元素
.title
color primary-color
font-size 24px
margin-bottom 20px
// 按钮样式 + 伪类
.btn
padding 8px 16px
background primary-color
color #fff
border none
border-radius 4px
cursor pointer
// & 代表父选择器（.btn）
&:hover
background lighten(primary-color, 10%) // 内置函数：提亮颜色
&:active
background darken(primary-color, 10%) // 内置函数：加深颜色
</style>2. 单独的 Stylus 文件（全局样式）
- 在
src/styles下新建global.styl：
stylus
// src/styles/global.styl
// 全局变量/通用样式
body
margin 0
padding 0
font-family "Microsoft Yahei", sans-serif
color #333
// 通用混合函数
border-radius(val)
-webkit-border-radius val
-moz-border-radius val
border-radius val
// 通用类名
.text-center
text-align center- 在
src/main.js中引入全局 Stylus 文件：
javascript
运行
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
// 引入全局 Stylus 样式（Vite 会自动编译）
import './styles/global.styl'
createApp(App).mount('#app')五、运行验证
执行启动命令，查看效果：
bash
运行
npm run dev打开浏览器访问 http://localhost:5173，能看到：
- 标题文字为
#1890ff色 - 按钮 hover 时颜色变浅，点击时变深
- 页面无默认边距（全局样式生效）
总结
- Vite + Vue3 中使用 Stylus 只需安装
stylus和stylus-loader，无需额外配置； - 在
.vue文件中通过lang="stylus"启用 Stylus 语法，支持变量、嵌套、内置函数等特性； - 全局 Stylus 样式可单独建文件，在
main.js中引入即可全局生效。
如果运行中遇到报错（比如找不到依赖），可以检查：
- 依赖是否安装成功（查看
package.json的devDependencies）； - Vite 版本是否兼容（建议使用 Vite 4+ 版本）；
- Stylus 语法是否书写正确（比如少写空格、变量名错误）。