Stylus在Sublime Text中需同时安装插件、绑定Stylus语法、配置构建行为才能正常工作；仅装插件或仅设语法均无效，且自动编译依赖全局stylus命令和正确用户配置。
Stylus在Sublime Text里不能直接编译，必须装插件 + 手动绑定语法 + 配置构建行为，三者缺一不可；只装插件不设置语法，.styl 文件仍是灰字；只设语法不配构建，保存后不会自动生成.css文件。
Stylus插件安装与语法绑定失败的典型表现
装完Stylus插件后打开style.styl，代码全是灰色、无缩进高亮、Ctrl+Shift+P搜Set Syntax: Stylus没反应——说明插件没真正启用或语法未注册。这不是插件损坏，而是Sublime未加载该语法定义。
- 确认插件是否在
Preferences → Package Settings里出现Stylus条目，没有则重装：按Ctrl+Shift+P→ 输入Package Control: Remove Package→ 卸载后再Install Package重装 - 装好后，右键编辑器空白处 →
Set Syntax → Stylus → Stylus（不是“Stylus (Deprecated)”）；或用快捷命令Ctrl+Shift+P→ 输入Set Syntax: Stylus回车 - 若仍无选项，检查插件是否被禁用：
Preferences → Package Control → Disable Package列表里有没有Stylus
如何让保存.styl文件时自动编译为.css
默认安装的Stylus插件不开启自动编译，需手动修改用户配置。它依赖系统级stylus命令行工具，不是纯前端打包逻辑。
- 先确保已全局安装
stylus：终端运行npm install -g stylus，再执行stylus --version验证输出版本号 - 打开
Preferences → Package Settings → Stylus → Settings – User，填入以下内容（路径按实际调整）：
{
"compileOnSave": true,
"compress": false,
"compileDir": true,
"compilePaths": {
"src/styles/main.styl": "dist/css/main.css"
}
}
注意：compilePaths是对象，键为输入路径（相对项目根），值为输出路径；不支持通配符；若想编译整个src/stylus/目录，得逐个写死，或改用构建系统替代。
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
Vue单文件中<style lang="stylus">无法高亮？
Vue文件里的stylus块默认不识别，Stylus插件只处理独立.styl文件。要让<style lang="stylus">内联块高亮，必须装Vue Syntax Highlight插件，并确保它启用了stylus子语法支持。
- 装完
Vue Syntax Highlight后，打开一个.vue文件，右键 →Set Syntax → Vue Component - 检查
<style lang="stylus">内部是否高亮：若仍是灰色，打开Preferences → Package Settings → Vue Syntax Highlight → Settings – User，加入：
{
"syntaxes": ["stylus"]
}
这个配置告诉插件把lang="stylus"的<style>块交给Stylus语法解析器处理。不加这句，插件会忽略该lang值。
构建系统替代方案：比插件更可控但需手写JSON
当Stylus插件的compilePaths无法满足多入口、watch模式或自定义压缩参数时，建议弃用插件内置编译，改用Sublime原生构建系统。
- 菜单栏
Tools → Build System → New Build System，粘贴以下内容（Linux/macOS）：
{
"cmd": ["stylus", "-c", "-o", "dist/css", "$file"],
"selector": "source.styl",
"file_regex": "^(...*?):([0-9]+):([0-9]+): (.*)$"
}
Windows用户把"cmd"改为：["stylus.cmd", "-c", "-o", "dist\css", "$file"]；保存为Stylus.sublime-build，之后用Ctrl+B即可编译当前文件。这种方式绕过插件限制，也避免compileOnSave对非项目文件的误触发。
Stylus插件的compileOnSave机制不支持增量编译或依赖追踪，改一个变量，所有引用它的文件不会联动更新；真要工程化，还是得上stylus --watch配合终端，或者迁移到Vite/Webpack这类现代构建工具。
