VSCode本身不编译CSS预处理器文件，必须依赖外部CLI工具（如sass、lessc）配合tasks.json任务配置实现稳定监听与编译；插件方案（如Easy LESS、Live Sass Compiler）在v1.80+中易静默失效，推荐优先使用官方CLI。
VSCode 本身不编译 CSS 预处理器文件，必须靠外部 CLI 工具 + 插件或任务配置才能生成 CSS；插件方案（如 Easy LESS、Live Sass Compiler）在新版 VSCode（v1.80+）中容易静默失效，推荐优先用 lessc 或 sass CLI 配合 tasks.json 实现稳定监听。
Easy LESS 插件为什么保存没反应？
它从 2021 年起停止维护，新版 VSCode 的文件监视机制变化后，常出现「看似启用实则未运行」的情况：
-
easy LESS默认跳过以下划线开头的文件（如_variables.less），认为是 partial，不输出 CSS - 插件依赖本地
lessc命令，若没装 Node.js 或没全局安装less（npm install -g less），它不会报错，只是什么都不做 - WSL、网络盘、OneDrive 同步目录下，VSCode 的文件系统节流可能延迟触发监听，导致保存后数秒才编译，甚至漏编译
用 tasks.json 调用 lessc 实现可靠编译
绕过插件，直接调用官方 CLI，可控性强，还能加 --source-map、--strict-imports 等参数：
- 先确认
lessc --version能正常返回版本号（需npm install -g less） - 项目根目录建
.vscode/tasks.json，内容如下（注意路径变量）：{ "version": "2.0.0", "tasks": [{ "label": "less: watch", "type": "shell", "command": "lessc", "args": [ "--watch", "--source-map", "--strict-imports", "${file}", "${fileDirname}/${fileBasenameNoExtension}.css" ], "isBackground": true, "group": "build", "presentation": { "echo": true, "reveal": "silent", "panel": "shared" }, "problemMatcher": [] }] } - 按
Ctrl+Shift+P→ 输入Tasks: Run Task→ 选less: watch启动监听 - 修改任意
.less文件并保存，lessc会实时输出同名.css和.css.map
Live Sass Compiler 插件配置要点（仅限 SCSS/Sass）
它是目前对 Sass/SCSS 支持最稳定的插件，但默认配置易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 必须在项目根目录存在
.vscode/settings.json，且至少写入："liveSassCompile.settings.formats": [{ "format": "expanded", "extensionName": ".css", "savePath": "/css/" }] -
savePath是相对路径，/css/表示项目根目录下的css/文件夹；若写成~/css/，部分系统会解析失败 - 如果 SCSS 文件里用了
@import "utils/breakpoints"，但找不到文件，大概率是没配liveSassCompile.settings.includePaths，需显式添加："liveSassCompile.settings.includePaths": ["src/scss/"]
- 插件默认不处理
.sass（缩进语法），只认.scss；如需支持，得手动在settings.json中加："files.associations": {"*.sass": "sass"}
Vite 项目别折腾 VSCode 编译插件
如果你用的是 Vite（2026 年已成主流），所有预处理器编译都由构建工具接管：
- 删掉
Easy LESS、Live Sass Compiler等插件，它们和 Vite 的 HMR 冲突，反而导致样式热更新失败 - 直接在
.vue或.ts中import './style.scss'，Vite 自动调用sass或less（需本地安装npm install -D sass或less） - 想生成独立 CSS 文件？改用
vite-plugin-sass-dts或配置build.rollupOptions.output，而非依赖编辑器
真正麻烦的从来不是“怎么配”，而是搞不清当前项目到底该走插件流还是构建工具流——Vite/webpack 项目关掉所有编译插件，纯静态页面才考虑 tasks.json + CLI。路径变量、partial 命名规则、CLI 版本兼容性，这三个点卡住 80% 的人。
