WebStorm 默认不自动编译Less且不追踪@import依赖，需手动配置File Watcher：启用Trigger on external changes、关闭Track only root files，并正确设置--include-path和--source-map。
WebStorm 默认不自动编译 Less，必须手动配置 File Watcher 才能触发编译，且默认的 watcher 模板容易漏掉 @import 依赖追踪 —— 这是绝大多数人编译失败或修改子文件不更新 CSS 的根本原因。
为什么新建的 Less 文件改了没反应？
WebStorm 不会主动监听 @import 引入的 Less 文件（比如 variables.less、mixins.less），只监视当前被编辑的“主文件”。一旦你改了被 @import 的子文件，CSS 不会重新生成。
- 确认项目根目录下有
lessc命令可用：npm install -g less或本地安装后配对node_modules/.bin/lessc - 在 WebStorm 中打开
Settings > Tools > File Watchers，删掉自动生成的默认 Less watcher（它不带--include-path和--source-map支持） - 点
+ > Less新建一个，关键填三项：
– Program：lessc（全局）或$ProjectFileDir$/node_modules/.bin/lessc（项目级）
– Arguments：--source-map --include-path=$ProjectFileDir$/src/less $FileName$ $FileNameWithoutExtension$.css
– Output paths to refresh：$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
如何让所有 @import 文件改动都触发编译？
Less 官方命令本身不递归监听依赖，但 WebStorm 的 File Watcher 可通过「Trigger on external changes」+「Track only root files」关闭来实现近似效果 —— 实际上是靠 WebStorm 自动检测整个项目中所有被当前文件 @import 的路径，并把它们加入监控列表。
- 在刚建好的 Less watcher 设置里，勾选
Trigger on external changes - 取消勾选
Track only root files（这是最关键的一步，否则子文件修改完全无响应） - 确保你的
@import路径是相对的，且没用变量拼接（如@import "@{theme}/base.less"无法被静态分析） - 如果用了别名（如
@import "~bootstrap/less/mixins"），需在Arguments中加--paths=$ProjectFileDir$/node_modules
编译出错：'Cannot resolve file' 或 'ReferenceError: variable is not defined'？
这类报错基本不是语法问题，而是路径解析失败或变量作用域断裂。WebStorm 的 watcher 默认工作目录是文件所在目录，不是项目根目录，导致 @import 相对路径错位。
- 不要用
../跨多层向上找，统一用项目根为基准：把所有 Less 放进src/less/，然后在 Arguments 里加--include-path=$ProjectFileDir$/src/less - 避免在
.less里写@import "components/button"，改成@import "components/button.less"（显式后缀更稳定） - 检查是否有同名变量在多个
@import文件中重复定义，Less 不支持跨文件重定义，会静默忽略后声明 - 临时调试可加
--verbose到 Arguments，看 lessc 实际加载了哪些路径
真正麻烦的从来不是第一次编译通，而是后续迭代中子文件修改失效 —— 关键就卡在「Track only root files」这个开关是否关闭，以及 --include-path 是否覆盖全部 import 源。漏掉任意一项，都会让你反复怀疑是不是自己写错了 Less。
