PhpStorm配置Sass与Less编译插件-phpstorm-PHP中文网

phpstorm本身不编译sass/less，仅通过file watcher调用本地sass或lessc命令行工具；配置失败主因是编译器未装、program路径非绝对、arguments与output paths未同步配source-map、watch patterns未包含_*.scss/less，或与webpack/vite冲突。

phpstorm配置sass与less编译插件

PhpStorm 本身没有“Sass/Less 编译插件”——它只通过 File Watcher 调用你本地装好的 sass 或 lessc 命令行工具。装错、路径错、参数漏，保存文件后就什么都不会发生。

确认本地编译器已正确安装且可执行

File Watcher 是个“壳”，真正干活的是终端里能跑起来的命令。别信“装了插件就自动好使”这种说法。

sass --version 必须输出类似 1.77.2 的版本号——推荐全局安装 Dart Sass：npm install -g sass；node-sass 已废弃，不支持 @use，且常报 Cannot find module 'node-sass'
lessc --version 要有输出——装 less 包：npm install -g less；Less v4.0+ 必须加 --no-js 参数，否则静默失败，错误提示是 JS evaluation disabled
Windows 用户若用 Git Bash/WSL 启动 PhpStorm，注意它默认可能走 CMD 环境；此时 Program 字段得填绝对路径，比如 C:\Users\XXX\AppData\Roaming\npm\sass.cmd
macOS/Linux 用户若用 nvm，需从终端执行 open -a PhpStorm 启动，否则 PhpStorm 可能读不到 shell 的 PATH

File Watcher 的 Program 字段必须填绝对路径

PhpStorm 启动时的工作目录不确定，sass 或 lessc 这种命令名无法被可靠解析。直接写相对命令，大概率报错 Command "sass" not found 或 lessc is not recognized。

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

先在终端执行：which sass（macOS/Linux）或 where sass（Windows），拿到完整路径，例如：/usr/local/bin/sass 或 C:\Users\Alice\AppData\Roaming\npm\sass.cmd
Program 字段粘贴这个绝对路径，不加引号，也不带参数；Windows 下不能省略 .cmd 后缀
别填 sass.bat 或 scss.bat（那是 Ruby 时代的老路）；也别用 ./node_modules/.bin/sass 这类相对路径——IDE 工作目录不确定，大概率失效

Arguments 和 Output paths to refresh 必须同步配 sourcemap

默认 watcher 只生成 CSS，没有 .map 文件。浏览器 DevTools 点不到原始 .scss 行号，不是浏览器问题，是这里参数和刷新规则没对齐。

Arguments 示例（Sass）：$FileName$ $FileDir$/$FileNameWithoutExtension$.css --style=expanded --source-map --no-cache --load-path=$ProjectFileDir$/node_modules
Arguments 示例（Less）：$FileName$ $FileDir$/$FileNameWithoutExtension$.css --source-map --no-js；注意 --source-map（不是 --sourcemap 或 --sourceMap）
Output paths to refresh 必须包含 map 文件：$FileNameWithoutExtension$.css;$FileNameWithoutExtension$.css.map；别写 **/*.css，否则改一个 _mixins.scss 可能刷出一堆无关 CSS
Working directory 固定设为 $ProjectFileDir$ ；设成 $FileDir$ 容易因相对路径崩掉

Watch patterns 必须显式包含下划线文件

这是高频静默失败点：默认的 **/*.scss 不会响应 _variables.scss 或 _layout.scss 的修改——而这些文件常被主入口 @import 或 @use 引入。

把 Watch patterns 改成：**/*.scss;**/_*.scss（Sass）或 **/*.less;**/_*.less（Less）；分号分隔，不能用空格或逗号
别依赖“自动识别 partial”——PhpStorm 不分析 import 依赖图，改了 _partial.scss 不触发重编译是正常行为，不是 bug
如果项目已用 Webpack/Vite，建议关掉 PhpStorm 的 File Watcher；两个工具同时监听同一组文件，会导致重复编译、CSS 覆盖冲突、甚至 watch 进程卡死

最容易被忽略的是 Output paths to refresh 字段——它控制编辑器是否重新加载 .map 文件，填错或漏填，DevTools 就永远跳不回源文件。还有就是 Windows 用户的 .cmd 后缀和 macOS/Linux 用户的启动方式，这两处一错，整个配置就形同虚设。