WebStorm 不会自动编译 SCSS 文件，**根本原因在于：WebStorm 本身只是一个 IDE（集成开发环境），它不内置 SCSS 编译器，也不会主动执行编译任务——它需要你显式配置文件监视器（File Watcher）或构建工具（如 Vite / Vue CLI / Webpack）来触发编译**。 ✅ 正确理解： - SCSS 是预处理器语言，必须通过 `sass`（Dart Sass，官方推荐）、`node-sass`（已弃用）等编译为 CSS 才能被浏览器识别。 - WebStorm 可以**自动调用 `sass` 命令行工具进行监听编译**，但前提是： 1. 本地已安装 `sass`（全局或项目级）； 2. 在 WebStorm 中正确配置了 **File Watcher**； 3. SCSS 文件保存时触发 watcher，生成对应的 `.css`（或 `.css.map`）文件。 --- ### ✅ 解决方案（以 Vue 项目 + Dart Sass 为例） #### 步骤 1：确保已安装 `sass` 在项目根目录运行（推荐项目局部安装，避免全局依赖冲突）： ```bash npm install -D sass # 或使用 pnpm/yarn ``` 验证是否可用： ```bash npx sass --version # 应输出类似 "1.77.6" ``` > ⚠️ 注意：`node-sass` 已停止维护，**强烈禁用**；若旧项目仍在用，请迁移至 `sass`（Dart Sass）。 --- #### 步骤 2：在 WebStorm 中配置 File Watcher 1. 打开 **Settings / Preferences**（`Ctrl+Alt+S` 或 `Cmd+,`） 2. 进入 **Tools → File Watchers** 3. 点击 `+` → 选择 **`SCSS`**（WebStorm 会自动识别并推荐基于 `sass` 的 watcher） > 若没有 `SCSS` 选项，请先确认已安装 `Sass` 插件（默认启用，无需手动安装）。 4. 配置关键字段（推荐设置）： | 字段 | 推荐值 | 说明 | |------|--------|------| | **Program** | `$ProjectFileDir$/node_modules/.bin/sass`（Windows 用 `sass.cmd`）<br>或全局路径如 `C:\Users\XXX\AppData\Roaming\npm\sass.cmd`（Windows）<br>`/usr/local/bin/sass`（macOS/Linux） | ✅ 必须指向有效的 `sass` 可执行文件；优先用项目内 `node_modules/.bin/sass`（跨平台兼容性好） | | **Arguments** | `--no-source-map --style=expanded $FileName$:$FileNameWithoutExtension$.css` | 编译单个 `.scss` → 同名 `.css`，不生成 sourcemap，普通展开格式（适合开发）<br>✅ 进阶可加 `--load-path=node_modules` 支持 `@use "bootstrap"` 等 | | **Output paths to refresh** | `$FileNameWithoutExtension$.css` | 告诉 WebStorm：编译后刷新这个 CSS 文件（使其热更新感知） | | **Working directory** | `$ProjectFileDir$` | 保证相对路径解析正确 | | ✅ **Trigger: On save** | ✔️ 勾选 | 保存 `.scss` 即编译 | | ✅ **Auto-save edited files to trigger watcher** | ✔️ 勾选 | 防止因未手动保存导致不编译 | 5. 点击 `OK` 保存。 > 💡 小技巧：右键任意 `.scss` 文件 → `Show Watcher Tasks` → 可手动触发编译，用于调试 watcher 是否生效。 --- #### 步骤 3：验证是否成功 - 修改一个 `.scss` 文件（如 `src/assets/styles/main.scss`）并保存； - 观察同目录下是否生成 `main.css`； - 查看 WebStorm 右下角是否有 `File Watcher` 成功提示（或打开 `Event Log` 查看错误）； - 若报错（如 `Command not found`），请检查 `Program` 路径是否正确、Node.js 是否配置（Settings → Languages & Frameworks → Node.js and NPM）。 --- #### 🔁 补充：Vue 项目中更推荐的现代方式（非 WebStorm 编译） 虽然 File Watcher 可用，但在 Vue 项目中，**真正推荐的方式是交由构建工具处理**： - Vue CLI：内置 `sass-loader`，`.vue` 中 `<style lang="scss">` 会自动编译； - Vite：默认支持 `*.scss`，无需额外配置（只需安装 `sass`）； - 因此，你**通常不需要 WebStorm 编译 `.vue` 内的 SCSS** —— 它们由开发服务器实时处理； WebStorm 的 File Watcher 更适用于**独立的 `.scss` 文件输出纯 CSS（如主题包、CSS 库）**。 ✅ 示例：在 `src/assets/main.scss` 中写： ```scss // src/assets/main.scss $primary: #42b883; body { color: $primary; } ``` → 配置 watcher 后生成 `main.css` → 在 `main.ts` 中 `import './assets/main.css'` 即可。 ---