安装sass相关插件并配置Live Sass Compiler，可实现Scss实时编译与浏览器自动刷新。1. 安装Sass、Live Sass Compiler、scss IntelliSense和Path Intellisense插件；2. 在settings.json中设置输出格式、保存路径及排除目录；3. 点击“Watch Sass”启动编译，配合Live Server实现页面热更新；4. 启用Emmet、设置默认格式化工具并开启保存自动格式化以提升编码体验。

在 vscode 中配置 Sass/SCSS 开发环境，能显著提升前端开发效率。关键在于安装合适的插件、配置编译选项以及启用语法高亮和智能提示。下面是如何搭建一个高效 Sass/SCSS 工作流的实用指南。

1. 安装必备插件

VSCode 本身不支持直接编译 Sass，需要借助扩展来增强功能。以下是几个核心插件：

• Sass（syler.sass-indented）：提供 .sass 和 .scss 文件的语法高亮与折叠支持。
• Live Sass Compiler（ritwickdey.live-sass）：实时将 SCSS 编译为 CSS，并自动刷新浏览器（配合 Live Server 使用更佳）。
• SCSS IntelliSense：提供变量、mixin 的跳转和自动补全功能。
• Path Intellisense：自动补全文件路径，尤其在使用 @import 时非常方便。

打开 VSCode 扩展面板（Ctrl+Shift+X），搜索并安装上述插件即可。

2. 配置 Live Sass Compiler

Live Sass Compiler 支持自定义输出格式、保存路径和排除目录。在项目根目录创建 .vscode/settings.json 文件进行配置：

立即学习“前端免费学习笔记（深入）”；

{   "liveSassCompile.settings.formats": [     {       "format": "expanded",       "extensionName": ".css",       "savePath": "/css"     },     {       "format": "compressed",       "extensionName": ".min.css",       "savePath": "/css"     }   ],   "liveSassCompile.settings.excludeList": [     "**/node_modules/**",     ".vscode/**"   ],   "liveSassCompile.settings.generateMap": false } 

说明：

琅琅配音

全能AI配音神器

89

查看详情

• format 可选 expanded、compressed 等，用于控制生成 CSS 的样式。
• savePath 指定编译后 CSS 输出的目录，可使用相对路径或 /表示根目录。
• excludeList 避免监控不必要的文件夹。

3. 启动自动编译与预览

配置完成后，打开任意 .scss 文件，底部状态栏会出现 “Watch Sass” 按钮。点击后，保存 SCSS 文件会自动编译成 CSS。

若想实现浏览器自动刷新：

• 安装 Live Server 插件。
• 右键 html 文件，选择 “Open with Live Server”，修改样式后页面将自动更新。

注意：确保 HTML 引入的是编译后的 CSS 文件，而不是原始 SCSS。

4. 提升编码体验的额外设置

让 SCSS 写起来更顺手：

• 启用 Emmet：在 SCSS 文件中使用 Emmet 缩写，可在 settings.json 中添加：

  "emmet.includeLanguages": {       "scss": "css"     }
• 设置默认 formatter：SCSS IntelliSense 或 PrimeTek.primeng-snippets 可提升代码整洁度。
• 开启保存时自动格式化：

  "editor.formatOnSave": true

基本上就这些。配置一次，长期受益。Sass 能帮你写出更结构化、易维护的样式代码，搭配 VSCode 的生态，开发体验很流畅。