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

VSCode前端：Sass/SCSS开发配置

狼影

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

原创

685人浏览过

安装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
}

登录后复制

说明：

NopCommerce (ASP.NET商城)

nopCommerce 是一个由ASP.NET多层模式开发的开源电子商城系统，可以自行设置模板、配置灵活、功能强大，它内含一个目录前端和一个管理工具后端。前端包括用户注册、商品购买(可以进行评论)、投票、Blog等，后端有类别管理、产品管理、客户及角色管理、订单管理、纳税管理、国家（地区管理）、邮件发送、消息模板、新闻发布、blog管理,可以对列表数据进行XML导出。

查看详情

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中文网其它相关文章！