VS Code Live Sass Compiler设置无法编译SCSS文件，设置是否有误？

云原生阿岚

2026-8-18

Live Sass Compiler 编译失败的问题排查与修复

你的设置存在几个关键问题，导致指定SCSS文件无法编译，下面是具体问题和修正方案：

核心问题分析

路径写法错误：你使用了服务器绝对路径（开头带/），但Live Sass Compiler识别的是相对于VS Code当前工作区根目录的相对路径，绝对路径会导致插件找不到目标文件。
JSON语法冗余：formats数组里的对象末尾多了一个逗号，可能引发解析错误（部分编辑器会容忍，但规范写法需要去掉）。
savePath的无效写法：直接写dawn-child/style.css是错误的，savePath只能指定文件夹路径，不能包含文件名，最终文件名由extensionName和原SCSS文件名自动生成。

修正后的设置示例

根据你打开的工作区不同，分两种情况：

情况1：VS Code工作区是整个WordPress根目录

{
  "es6-css-minify.cssPostfix": "",
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "./wp-content/themes/dawn-child"
    }
  ],
  "liveSassCompile.settings.includeItems": [
    "./wp-content/themes/dawn-child/style.scss"
  ]
}

情况2：VS Code工作区是`wp-content/themes`文件夹

{
  "es6-css-minify.cssPostfix": "",
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "./dawn-child"
    }
  ],
  "liveSassCompile.settings.includeItems": [
    "./dawn-child/style.scss"
  ]
}

如果要把编译后的CSS直接输出到style.scss所在的同目录，savePath可以简化为./。