Stylus在Sublime Text中默认不工作，需完成四步：绑定.styl语法高亮、开启compileOnSave、安装Vue Syntax Highlight支持.vue内高亮、全局安装stylus CLI并正确配置binDir路径。
Stylus在Sublime Text里默认完全不工作——装完插件、打开.styl文件还是灰底白字，保存也不生成.css，不是插件坏了，是四个关键环节中至少漏了两个。
Stylus插件装了但.styl文件没高亮？必须手动绑定语法
Package Control装完Stylus插件后，Sublime不会自动把.styl后缀和语法关联。不绑定，编辑器就当它是纯文本。
- 右键编辑器空白处 → Set Syntax → Stylus → Stylus（注意别选
Stylus (Deprecated)） - 或按
Ctrl+Shift+P（Win/Linux）/Cmd+Shift+P（macOS），输入Set Syntax: Stylus回车 - 确认状态栏右下角显示
Stylus，不是Plain Text或CSS - 如果菜单里压根没有
Stylus选项：检查Preferences → Package Settings有没有Stylus条目；没有就重装——先Package Control: Remove Package，再重新Install Package
save时没自动生成.css？compileOnSave没开 + stylus CLI没装好
Stylus插件的编译能力依赖系统级stylus命令行工具，不是纯JS逻辑。缺任一环，保存就静默失败。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 终端执行
npm install -g stylus，再跑stylus --version确认有输出 - 打开
Preferences → Package Settings → Stylus → Settings – User，填入最小可用配置：
{
"compileOnSave": true,
"compress": false,
"compileDir": "css",
"compilePaths": {
"": "css/"
}
}
-
"compileOnSave": true是总开关，不设为true就等于关着 -
"compileDir": "css"指输出目录名（相对当前文件路径），设为false才输出到同目录 -
"compilePaths"是映射表：""表示项目根路径，"css/"是目标子目录；多入口需逐个写死，不支持通配符 - 若项目已用 Webpack/Vite 构建，建议关掉
compileOnSave，否则和构建工具冲突
<style lang="stylus"> 在.vue里仍是灰色？Vue Syntax Highlight没配或没启用
Stylus插件只处理独立.styl文件，对.vue里的<style lang="stylus">块完全无感。高亮和编译是两套机制，不能互相替代。
立即学习“前端免费学习笔记（深入）”；
- 必须单独安装
Vue Syntax Highlight插件（不是 Vue-Snippets 或其它 Vue 相关包） - 装完后，打开
.vue文件，右键 → Set Syntax → Vue Component - 检查
<style lang="stylus">内部是否高亮；若仍是灰色，进Preferences → Package Settings → Vue Syntax Highlight → Settings – User，确认启用了stylus子语法支持（部分版本需手动开启） -
Vue Syntax Highlight不负责编译，它只提供高亮和基础补全；想实时看效果，得靠开发服务器（如 Vite HMR），不是靠 Sublime
为什么改了设置还是不生效？路径、权限、插件加载顺序都可能卡住
最常被忽略的是：Stylus插件的binDir路径未显式指定，尤其在 macOS 或某些 Windows 终端环境里，stylus命令存在但 Sublime 找不到。
- 在
Settings – User中补充"binDir"字段，指向全局stylus可执行文件位置：
{
"binDir": "/usr/local/bin",
"compileOnSave": true,
...
}
- macOS 上常用
/usr/local/bin，Linux 可能是/usr/bin，Windows 通常是C:\Users\xxx\AppData\Roaming\npm（注意双反斜杠） - 用
which stylus（macOS/Linux）或where stylus（Windows）查真实路径 - 如果多个插件都注册了
.vue语法（比如 Vue-Snippets 和 Vue Syntax Highlight 同时启用），后者可能被前者覆盖——禁用非必要插件，只留Vue Syntax Highlight - Sublime 启动时插件加载有顺序，
Stylus和Vue Syntax Highlight都要确保不在Disable Package列表里
