VSCode中SCSS/SASS文件修改后CSS未自动更新，需配置实时编译：一、安装Live Sass Compiler扩展并配置.vscode/settings.json；二、用dart-sass CLI配合tasks.json定义监视任务；三、集成Autoprefixer作编译后处理；四、确认.sass文件语言模式为SASS且配置生效。
如果您在VSCode中编辑SCSS或SASS文件，但修改后CSS文件未自动更新，则可能是由于缺少实时编译配置或相关扩展未正确启用。以下是实现SCSS/SASS实时编译的多种方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并配置Live Sass Compiler扩展
Live Sass Compiler是VSCode中最常用的SCSS/SASS实时编译工具，支持保存即编译、自定义输出路径与格式等核心功能。
1、打开VSCode扩展市场，搜索Live Sass Compiler，点击安装并重启VSCode。
立即学习“前端免费学习笔记（深入）”；
2、在工作区根目录创建.vscode/settings.json文件（若不存在），添加以下配置：
3、在settings.json中写入编译参数，例如指定输出目录为css/、启用压缩模式、禁用源映射：
4、保存设置后，打开任意.scss或.sass文件，点击右下角状态栏中的Watch Sass按钮启动监听。
二、使用dart-sass命令行配合VSCode任务
该方法通过本地安装的dart-sass CLI实现编译，不依赖扩展，兼容性更强且便于集成到构建流程中。
1、在终端执行npm install -g sass全局安装dart-sass。
2、在项目根目录创建.vscode/tasks.json文件，定义一个监视任务：
3、配置args字段，指定输入文件为src/scss/**/*.scss，输出目录为dist/css，并启用--watch和--style=compressed选项。
4、按下Cmd+Shift+P（macOS）调出命令面板，输入并选择Tasks: Run Task，再选择刚定义的sass-watch任务。
三、启用Autoprefixer并嵌入编译流程
仅生成标准CSS不足以适配多浏览器，需在编译后自动添加厂商前缀。本方法将Autoprefixer作为编译后处理步骤集成进工作流。
1、在项目中安装autoprefixer和postcss-cli：npm install --save-dev autoprefixer postcss-cli。
2、在项目根目录创建postcss.config.js，配置Browserslist目标：
3、修改tasks.json中的args，将dart-sass输出路径设为临时目录，再追加一条postcss命令，输入临时CSS、输出至最终dist/css。
4、确保postcss命令在sass编译完成后执行，可通过&&连接或使用dependsOn字段声明任务依赖关系。
四、切换SASS语法模式并验证编译器识别
VSCode默认可能将.sass文件识别为旧版缩进语法，若编译失败，需确认编辑器语言模式与编译器配置一致。
1、打开任意.sass文件，在VSCode窗口右下角点击当前语言标识（如“Plain Text”）。
2、在弹出菜单中选择Configure Language Mode，然后搜索并选择SASS（注意区分大小写，非SCSS）。
3、检查settings.json中是否包含"liveSassCompile.settings.formats"配置项，并确认其extension字段对.sass文件生效（如设为".css"）。
4、新建一个仅含$primary: #3498db;和.btn { color: $primary; }的test.sass文件，保存后观察是否生成对应CSS。
