WebStorm配置Sass/Less自动编译成CSS的详细步骤-webstorm-PHP中文网

webstorm 默认file watcher不生成source map，需手动添加--source-map参数并配置output paths刷新.map文件，chrome还需开启css source maps支持。

webstorm配置sass/less自动编译成css的详细步骤

WebStorm 默认支持 Sass、SCSS 和 Less 的自动编译，但**开箱即用的 File Watcher 只生成 CSS，不带 source map**；想在浏览器里准确调试原始 `.scss` 或 `.less` 文件，必须手动补全 `--source-map` 参数并校准输出路径——否则断点无效、样式定位错乱。

配置 File Watcher 前先装好编译器

WebStorm 不自带编译器，只调用你本地安装的命令行工具：

node-sass（已废弃，不推荐）或 sass（Dart Sass，官方推荐）用于 Sass/SCSS；执行 npm install -g sass
lessc 用于 Less；执行 npm install -g less
确认命令可用：sass --version 或 lessc --version 能正常输出版本号
若用 Ruby Sass（sass 命令来自 gem），需提前装好 Ruby 并运行 gem install sass（注意：Ruby Sass 已于 2019 年弃用，不建议新项目使用）

Arguments 参数必须显式加 --source-map

WebStorm 自动生成的 File Watcher（比如点击 “Enable File Watcher” 提示后创建的）默认 Arguments 是：$FileName$ $FileDir$/$FileNameWithoutExtension$.css —— 这只会输出 CSS，没有 source map。

要让浏览器 DevTools 能映射回源文件，得改成：

sass $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css --sourcemap --no-cache

或对 Less：

lessc $FileName$ $FileParentDir$/css/$FileNameWithoutExtension$.css --source-map

关键点：

--sourcemap（Sass）和 --source-map（Less）大小写和连字符不同，不能写错
$FileParentDir$ 指的是当前文件所在目录的上一级，比如 src/styles/main.scss 的 $FileParentDir$ 是 src，不是 styles
如果希望 CSS 和 .map 都输出到与源文件同级，直接用 $FileDir$ ，例如：$FileName$ $FileDir$/$FileNameWithoutExtension$.css --source-map

Output paths to refresh 要同步声明 .map 文件

这个字段控制 WebStorm 在编译后刷新哪些文件的编辑器标签。如果不填或只填 .css，改完源文件保存后，.map 文件可能不会及时更新，导致 DevTools 加载旧映射。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

正确写法（以 SCSS 为例）：

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

注意：: 是分隔符，不是路径分隔符；两个文件名之间不能有空格；扩展名必须完全匹配实际生成的文件名（如 main.css.map，不是 main.map）。

Less 编译默认生成 style.css.map，Sass 默认也是 style.css.map，但如果你用了 --source-map-embed 或 --source-map-root，路径行为会变，此时要按实际输出调整。

Chrome DevTools 必须手动开启 Source Map 支持

即使 WebStorm 正确生成了 .css.map 并在 CSS 文件末尾写了 /*# sourceMappingURL=main.css.map*/，Chrome 默认也不会加载它。

打开 Chrome DevTools（F12）→ Settings（⚙️）→ Preferences → Sources → 勾选 “Enable CSS source maps”。

另外两个容易被忽略的点：

确保 HTML 中引入的是编译后的 .css 文件，而不是原始 .scss 或 .less
如果 CSS 文件在子目录（如 /css/main.css），而 .map 在根目录，浏览器按相对路径找会失败；此时要么把 .map 放同目录，要么用 --source-map-root 显式指定基础路径

最稳的做法：CSS 和 .map 始终放在同一目录，HTML 引入路径与该目录一致，Chrome 开启开关，就基本不会掉链子。