atom本身不内置sass编译能力，必须安装atom-build-sass或sass-autocompile插件并全局安装dart sass（npm install -g sass），禁用已废弃的node-sass；需配置executablepath、outputpath、--style和--source-map等参数，注意路径无中文空格、文件保存后才触发编译。
Atom 本身不编译 Sass，也不自动生成 CSS；所有编译行为都依赖插件调用外部 CLI 工具（sass 或 lessc），且必须全局安装对应命令才能工作。装错编译器、路径配错、插件组合漏掉一个环节，都会导致“保存了但没生成 CSS”。
为什么 sass --version 能运行，Atom 却报 “Command not found: sass”
Atom 启动时加载的 shell 环境和你终端里用的可能不是同一个——尤其是 macOS 上用 Homebrew + zsh 安装 Node 的用户，Atom 常常找不到 /opt/homebrew/bin/sass。
- 先在终端执行
which sass，拿到真实路径（比如/opt/homebrew/bin/sass或/usr/local/bin/sass） - 打开 Atom → Settings → Packages →
atom-build-sass或sass-autocompile→ Settings - 把
executablePath字段填成上面那个完整路径，不要留空 - 重启 Atom，否则新路径不生效
Windows 用户如果用 PowerShell 配置过别名或 npm prefix，也建议直接填 npm root -g 下的 sass.cmd 全路径，比依赖环境变量更稳。
atom-build-sass 和 sass-autocompile 怎么选
两者都只负责调 sass 命令，区别在触发时机和配置粒度：
-
atom-build-sass更轻：默认不监听保存，需配合build-on-save插件才自动编译；适合想手动控制、或项目里混用多种构建逻辑的人 -
sass-autocompile自带 watch 模式：勾选 “Compile on save” 就行，但它的outputPath解析规则容易踩坑——填../css/$1.css才能输出到上层css/目录，填css/$1.css会写进当前目录下的css/子目录 - 别装
atom-sass：它只支持已淘汰的 Ruby Sass，不认 Dart Sass，装了也白装
编译出来的 CSS 是压缩的、没 source map、路径乱跳到 .sass-cache
这是插件默认参数太简陋导致的。Dart Sass 默认行为是 --style=compressed --no-source-map，而且缓存目录写在项目根下，一旦项目在 iCloud、OneDrive 或只读挂载点里，就会报 EROFS: read-only file system。
- 在插件的
arguments字段里补全：--style=expanded --source-map --no-cache -
outputPath必须是相对路径，且以当前 .scss 文件所在目录为基准；填绝对路径（如/dist/style.css）会导致拼接出错，生成文件消失 - 如果用了
@import "_mixins.scss"，确保当前激活标签页是主入口文件（如main.scss），否则build-on-save可能静默失败
Less 编译怎么配，和 Sass 有啥不一样
流程几乎一样，只是换命令和插件：
- 全局装
lessc：npm install -g less，验证用lessc --version - 插件换成
less-build（不是language-less，后者只管高亮） -
executablePath同样要手动填，比如/usr/local/bin/lessc - Less 默认不生成 source map，得加
--source-map参数；它的 watch 模式叫--watch，不是--watch后跟目录，而是lessc --watch input.less output.css
最常被忽略的是：Sass 和 Less 的插件不能共用同一套配置项，sass-autocompile 的 outputPath 语法对 less-build 完全无效，后者靠命令行参数传路径，得在 arguments 里写死 input.less css/output.css 这种形式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
