LiveSassCompiler实时预览设置教程

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Live Sass Compiler实时预览样式设置方法》，聊聊，我们一起来看看吧！

安装Live Sass Compiler和Live Server扩展，配置输出路径后启动监听，保存SCSS文件时自动编译为CSS，Live Server检测到变化并刷新浏览器，实现样式实时预览。

Live Sass Compiler 是 Visual Studio Code 中一个非常实用的扩展，它能将 Sass（.scss 或 .sass）文件自动编译为 CSS，并支持实时预览样式变化。要实现样式实时预览，需结合编译功能与浏览器刷新机制。

1. 安装并配置 Live Sass Compiler

在 VS Code 扩展市场中搜索 Live Sass Compiler 并安装。安装完成后，打开一个包含 .scss 文件的项目。

默认情况下，保存 .scss 文件时会自动生成对应的 .css 和 .css.map 文件。你可以在项目根目录创建 settings.json 来自定义输出路径：

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": true
}

上面配置表示：编译后的 CSS 文件输出到项目下的 /css 目录中，格式为展开式（便于调试）。

2. 启动实时编译

点击 VS Code 编辑器右下角的 Watch Sass 按钮（或按 Ctrl+Shift+P 输入 “Live Sass: Watch Sass”），启动监听模式。

此时，只要你修改并保存任何一个 .scss 文件，Live Sass Compiler 就会立即生成更新后的 CSS 文件。

3. 实现浏览器实时刷新

Live Sass Compiler 本身不提供浏览器自动刷新功能，需要配合其他工具实现真正意义上的“实时预览”。

推荐使用 Live Server 扩展：

• 安装 VS Code 扩展：Live Server
• 在 HTML 文件中引入编译生成的 CSS 文件（如：）
• 右键点击 HTML 文件，选择 “Open with Live Server”

这样，当你修改 .scss 文件并保存时，Sass 被编译成 CSS，Live Server 检测到 CSS 文件变化，自动刷新浏览器页面。

4. 工作流程总结

完整实时预览流程如下：

• 编写 SCSS 代码并保存 → Live Sass Compiler 编译为 CSS
• CSS 文件更新 → Live Server 检测到静态资源变化
• 浏览器自动刷新，展示最新样式

基本上就这些。只要配置正确，整个过程流畅自然，极大提升前端开发效率。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《LiveSassCompiler实时预览设置教程》文章吧，也可关注golang学习网公众号了解相关技术文章。