欢迎访问永胜空间,好运加身,财源广进不是梦

VS Code插件Live Sass Compiler配置方法

  • 工作心得 @ 2025-02-13
  • 作者:顾永胜
  • 来源:Kimi AI
Live Sass Compiler 是一个用于 Visual Studio Code 的扩展,可以帮助开发者将 Sass 或 Scss 文件实时编译为 CSS 文件。以下是 Live Sass Compiler 的配置方法

安装

  1. 打开 Visual Studio Code。
  2. 按下 Ctrl+P,输入 ext install glenn2223.live-sass 并回车,安装 Live Sass Compiler 扩展

使用

  • 启动实时编译:点击状态栏中的 "Watch Sass" 按钮,或者按下 F1Ctrl+Shift+P,输入 Live Sass: Watch Sass 并回车
  • 停止实时编译:点击状态栏中的 "Stop Watching Sass" 按钮,或者按下 F1Ctrl+Shift+P,输入 Live Sass: Stop Watching Sass 并回车
  • 一次性编译:按下 F1Ctrl+Shift+P,输入 Live Sass: Compile Sass - Without Watch Mode 并回车

配置

在 VS Code 的 settings.json 文件中可以进行以下配置:
{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded", // 编译后的 CSS 格式,可选值为 expanded、compact、compressed、nested
      "extensionName": ".css", // 编译后的文件后缀名
      "savePath": null // 编译后文件的保存路径
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/dist/css"
    }
  ],
  "liveSassCompile.settings.excludeList": [
    "/**/node_modules/**", // 排除的文件夹路径
    "/**/.vscode/**"
  ],
  "liveSassCompile.settings.generateMap": false, // 是否生成 source map 文件
  "liveSassCompile.settings.autoprefix": [ // 自动添加浏览器前缀的配置
    "> 1%",
    "last 2 versions"
  ]}
其他设置
  • liveSassCompile.settings.watchOnLaunch:定义是否在启动时立即开始监听,而不是等待手动启动。默认值为 false
  • liveSassCompile.settings.compileOnWatch:定义在开始监听时是否编译所有文件。默认值为 true
  • liveSassCompile.settings.forceBaseDirectory:定义一个子目录作为搜索起点,提高性能
  • liveSassCompile.settings.rootIsWorkspace:定义路径是否相对于工作区根目录。默认值为 false
通过合理配置这些选项,可以使得工作流程变得更加高效与自动化
  • VS Code插件Live Sass Compiler配置方法