VSCode前端：Sass/SCSS开发配置-VSCode-PHP中文网

VSCode前端：Sass/SCSS开发配置

狼影

发布： 2025-10-22 08:51:02

原创

668人浏览过

安装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开发配置

在 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
}

登录后复制

说明：

ERMEB云盘发卡小程序源码

ERMEB云盘发卡系统官方正版系统发卡系统操作简单、方便、易懂，系统微信小程序前端采用nuiapp、后端采用think PHP6，PC前端采用vue开发，使用场景：文件上传储存。适合个人/个体/中小企业使用，本系统配合微信小程序端进行使用，文件下载以及发卡商品卡密领取都需要进入小程序内获取下载码以及卡密领取，小程序内可设置积分充值以及任务获取积分，支持微信激励广告领取文件下载码以及卡密商品，可实现

查看详情

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 的生态，开发体验很流畅。

以上就是VSCode前端：Sass/SCSS开发配置的详细内容，更多请关注php中文网其它相关文章！