Sublime Text 4中如何实现SASS编译触发LiveReload自动刷新

核心问题：SASS编译生成CSS后LiveReload不自动刷新 #

问题根因 #

Sublime端LiveReload插件默认仅监听编辑器前台主动保存的文件变更，SublimeOnSaveBuild触发SASS编译属于后台子进程写文件，不在默认监听范围内；之前替换--watch参数无效是因为SASS自带的watch模式会启动常驻进程，和SublimeOnSaveBuild的保存即触发逻辑冲突，反而会导致进程残留、编译时序混乱。

配置步骤 #

• 移除构建脚本中的--watch参数，换回--update参数，避免常驻进程冲突。
• 打开Sublime Text 路径 Preferences -> Package Settings -> LiveReload -> Settings - User，添加如下配置：

{
  "enabled_plugins": [
    "SimpleReloadPlugin",
    "SimpleRefresh"
  ],
  "monitor_external_changes": true,
  "monitor_file_extensions": ["css", "html", "js"],
  "delay": 300
}

配置说明：

• monitor_external_changes: true 开启外部进程写入文件的变更监听，覆盖SASS后台编译生成的CSS文件改动
• delay: 300 增加300毫秒延迟，等待SASS编译完成、文件写入磁盘后再触发刷新，避免读取到不完整的文件内容
• 若仍存在刷新不触发的情况，打开SublimeOnSaveBuild的用户配置，将build_on_save_delay参数设置为500，给编译流程留足时间，避免时序错位。

附加问题1：单次保存同时输出普通版、压缩版CSS时&报语法错误 #

问题根因 #

Sublime构建系统默认不会把cmd字段的内容交给系统Shell解析，&是Shell层面的命令连接符，直接写在cmd里会被当成普通参数传给SASS可执行程序，触发语法错误。

解决方法 #

在自定义SASS构建配置中添加"shell": true字段，让命令通过系统Shell解析，即可正常使用&/&&连接多条编译命令，参考配置如下：

{
  "cmd": [
    "/home/matrix/.rbenv/shims/sass --update --style expanded --stop-on-error --no-cache --sourcemap=none --load-path ./sass $file ../css/$file_base_name.css && /home/matrix/.rbenv/shims/sass --update --style compressed --stop-on-error --no-cache --sourcemap=none --load-path ./sass $file ../css/$file_base_name.min.css"
  ],
  "shell": true,
  "selector": "source.sass, source.scss",
  "osx": {
    "path": "/usr/local/bin:/home/matrix/.rbenv/shims"
  },
  "windows": {
    "cmd": ["sass --update --style expanded --stop-on-error --no-cache --sourcemap=none --load-path ./sass $file ../css/$file_base_name.css && sass --update --style compressed --stop-on-error --no-cache --sourcemap=none --load-path ./sass $file ../css/$file_base_name.min.css"]
  }
}

建议用&&替代&，逻辑为前一条编译命令执行成功后再执行下一条，避免编译出错时生成无效的空CSS文件。配置中osx字段的path项已加入rbenv的shims路径，无需再写死sass可执行文件的全路径。

附加问题2：调整CSS输出格式让大括号单独占一行 #

SASS编译内置4种输出风格，默认的nested风格为大括号与选择器同行，只需在普通版CSS的编译参数中添加--style expanded即可实现大括号单独占一行的手写规范格式，各风格区别如下：

• nested：默认风格，大括号与选择器同行，缩进跟随嵌套层级
• expanded：大括号单独成行，每个选择器、属性单独占行，格式和手写标准CSS一致
• compact：每个选择器规则集单独占一行
• compressed：移除所有多余空格、换行、注释，体积最小，用于生产环境

内容的提问来源于stack exchange，提问作者Matrix