How to customerize the Live Sass Compiler settings for CSS output path and formats

In Visual Studio Code, I’m using the Live Sass Compiler and Live Server (both plugins are developed by Ritwick Dey) for the development HTML project.

After install Live Sass compiler and Liver Server, the quickly functional button “Watch Sass” and “Go Live” will show in the VSCode bottom status list.

How customer the Live Sass Compiler output settings like output path and minimize formats

Here is my original project folder, and I wanna set the scss file output css to path “./public/css” with normal css and minify css:

.
├── public
│   ├── app
│   │   └── js
│   ├── css
│   └── images
│       ├── logo.png
└── scss
    ├── _globals.scss
    ├── _variables.scss
    └── app.scss

Now, edit the setting.json in VSCode.

In VS Code, go to “Code > Preferences > Settings > User > Extensions > Edit in settings.json” for change the global settings.

If you just wanna change the settings in the current workspace, go to “Code > Preferences > Settings > Workspace > Extensions > Edit in settings.json” for change the workspace settings.

Here, put the following content to settings.json:

.vscode/settings.json

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "./public/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "./public/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": false,
    //autoprefix, will auto add perfix like -webkit- -moz-..
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ]
}

When saving the settings, start running “Watch Sass” (in the bottom status list).

Here will show the compiling output path is changed and min.css is generated:

Compiling Sass/Scss Files:
/Users/project/webpage/scss/app.scss
--------------------
Generated :
/Users/project/webpage/public/css/app.css
--------------------
Generated :
/Users/project/webpage/public/css/app.min.css
--------------------
Watching...
--------------------

Folder and file are generated in ./public/css

.
├── public
│   ├── app
│   │   └── js
│   ├── css
│   │   ├── app.css
│   │   └── app.min.css
│   └── images
│       ├── logo.png
└── scss
    ├── _globals.scss
    ├── _variables.scss
    └── app.scss