使用Yarn添加模块后PhpStorm中Less编译报错求助

问题原因 #

你执行yarn add jquery.fancytree后，PhpStorm的Less监视器编译bootstrap-datetimepicker-build.less时抛出FileError: 'bootstrap/less/variables.less' wasn't found，本质是Less编译器没有找到Bootstrap Less文件的正确路径。DateTimePicker的Less代码依赖Bootstrap的变量，但默认的lessc命令会从当前编译文件的目录下搜索依赖，而你的Bootstrap文件显然不在DateTimePicker的src/less目录里。

解决方案 #

1. 定位Bootstrap Less文件的实际路径

首先找到你项目中Bootstrap Less文件的位置：

• 如果是通过Yarn/npm安装的Bootstrap，路径通常是项目根目录/node_modules/bootstrap/less/，对应到你的项目就是/home/grek/PhpstormProjects/crm4/node_modules/bootstrap/less/。
• 如果是手动引入的Bootstrap，找到存放variables.less的bootstrap/less/目录。

2. 修改Lessc编译命令，添加路径参数

在PhpStorm的Less监视器中，把原来的编译命令：

/usr/local/bin/lessc --no-color bootstrap-datetimepicker-build.less

修改为：

/usr/local/bin/lessc --no-color --include-path=/home/grek/PhpstormProjects/crm4/node_modules/bootstrap/less/ bootstrap-datetimepicker-build.less

--include-path参数会告诉Less编译器额外的依赖搜索目录，这样它就能找到Bootstrap的variables.less了。

3. 更新PhpStorm的File Watcher配置

1. 打开PhpStorm的File > Settings（Windows/Linux）或PhpStorm > Settings（Mac）。
2. 导航到Tools > File Watchers，选中你的Less监视器。
3. 在Program字段里替换成上面修改后的完整命令。
4. 点击Apply保存配置。

4. 验证修复

修改任意Less文件并保存，触发监视器编译，此时应该不会再出现找不到variables.less的错误了。

额外提示 #

如果后续依赖路径有变化，只需要更新--include-path的值即可，尽量不要修改第三方库（比如DateTimePicker）的Less代码，避免后续升级库时丢失修改。

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