实时 sass 编译器未生成 css 文件

Question

I use live sass compiler extension in vsCode then generation css not worked for me until I save main.scss file.

for example have a project contains this directory

+style
 - style.css
 - main.scss
 - dashboard (folder)
  --_sidebar.scss

+index.html

if change happened in _sidebar.scss nothing happened, but then I save main.scss file and generation happened.

its always same and every time I use live sass compiler boring me when change SCSS file then again save main.scss just to generate CSS file.

I changed live sass compiler setting in setting.json to this:

"liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "~/../style",
      "savePathSegmentKeys": null,
      "savePathReplaceSegmentsWith": null
    }
  ]

but it generate all SCSS files in any folder in my computer and I don't know how to fix it.

I want to generate CSS file every time when change happen in any SCSS file

Answer 1

Just to let you know, my maintained fork supports multi-root workspaces. if you install that, you can keep your settings/structure the same and it will just work

Answer 2

just change your code in settings.json to this one:

{
"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": true,
"liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]

}