需安装atom-build-sass（Sass）或less-build（Less）插件，并全局安装Dart Sass/lessc命令；配合build-on-save实现保存自动编译，注意配置executablePath、参数如--style=expanded--source-map--update及路径无空格中文。
Atom里装什么插件才能编译Sass/Less
靠 Atom 自身完全没法编译 Sass 或 Less，必须装第三方插件。最常用、维护还行的是 atom-build-sass 和 less-build，但它们依赖系统已安装的 sass 或 lessc 命令——不是 npm 全局装好就行，还得确保终端里能直接敲 sass --version 或 lessc --version 有输出。
常见错误现象：Build failed: Command not found: sass 或构建时卡住没反应。
- 先在终端运行
npm install -g sass less（注意：用 Dart Sass，别用已废弃的node-sass） - 装完后重启 Atom，再装插件
atom-build-sass（Sass）或less-build（Less） - 插件本身不带编译器，只负责调命令；如果全局命令路径被 Atom 终端环境忽略（尤其 macOS zsh + Homebrew），可能需要手动配置插件里的
executablePath
怎么让 .scss 文件保存时自动编译成 .css
Atom 默认不监听文件保存事件来触发构建，得靠插件联动。推荐组合：atom-build-sass + build-on-save（后者是独立插件，必须另外安装）。
使用场景：改一行 _variables.scss，希望立刻看到 style.css 更新，而不是每次手动按 Ctrl+Alt+B。
-
build-on-save插件启用后，默认对所有支持构建的文件类型生效，但需确认它没被file-types插件误屏蔽 - Sass 插件默认输出路径是同目录下同名
.css文件；想输出到dist/css/？得在插件设置里填--no-source-map --style=expanded --update并配outputPath（部分版本不支持，容易白配） - 如果项目用了
@import多个局部文件（如_mixins.scss），确保主入口文件（如main.scss）是当前激活标签页，否则build-on-save可能静默失败
为什么编译出来的 CSS 没有 source map 或格式混乱
因为 atom-build-sass 默认参数极简，不加任何选项就是压缩模式（--style=compressed），且不生成 .map 文件。这不是 bug，是插件设计如此——它只是把命令行封装了一层，没做智能适配。
性能影响：开启 --source-map 会略微拖慢单次编译，但调试时省掉 80% 的定位时间；用 --style=expanded 对比压缩版，体积大 3–5 倍，但浏览器开发者工具里能精准跳转到源 .scss 行号。
- 在插件设置的
Arguments栏填完整参数，例如：--style=expanded --source-map --update - 注意
--update是增量编译关键，不加它每次都会全量重编，大项目明显卡顿 - Less 插件（
less-build）参数名不同：--source-map有效，但--source-map-file必须显式写成main.css.map才能和输出 CSS 同名匹配
Windows 上路径空格或中文导致编译失败
这是 Node.js 子进程调用时的经典问题：Atom 插件启动 cmd.exe 执行 sass，但路径含空格（如 C:\Users\John Doe\project）或中文（如 我的项目）时，没加引号就直接拼命令，cmd 把空格当分隔符，报错 The system cannot find the path specified。
兼容性影响：macOS/Linux 一般没事，Windows 用户踩坑率超 60%。
- 最稳解法：把项目移到无空格、无中文路径下，比如
C:\dev\myapp - 临时绕过：在插件设置里把
executablePath改成带引号的绝对路径，例如"C:\Users\John Doe\AppData\Roaming\npm\sass.cmd"（注意是.cmd而非.js） - 别信“改 Atom 配置里的
environment”这种方案——插件不读那个字段，纯浪费时间
真正麻烦的从来不是装哪个插件，而是搞清谁在调用谁、路径是否被 shell 正确解析、以及插件参数到底透传给了底层命令几成。多看一眼终端报错里的实际执行命令，比反复重装插件有用十倍。
