Set the Output Path for Compiled CSS in VS Code Live Sass Compiler

The Live Sass Compiler extension for VS Code saves compiled CSS files next to your SCSS files by default. To write them to a separate folder, such as assets/css/, set the output path in the extension’s settings.

Use the Live Sass Compiler by Glenn Marks. The original extension by Ritwick Dey hasn’t been updated since 2018; Glenn Marks’ version continues it under the same name and uses the same liveSassCompile.settings keys shown below.

Where to add the settings

Open the Live Sass Compiler extension settings in VS Code and follow the link to edit them in settings.json. Add the lines below inside the outer curly braces, separated from the existing settings by commas. To apply them to one project only, put them in that project’s .vscode/settings.json instead.

"liveSassCompile.settings.autoprefix": [],
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../assets/css/"
        }
    ]

What the settings do

• formats is a list of output files. Each entry creates one CSS file, so you can add a second entry, for example for a minified version.
• "format": "expanded" writes readable, indented CSS. Use "compressed" for minified output.
• extensionName is the file extension of the output, here .css.
• savePath is the output folder. A path that starts with ~ is relative to each SCSS file, so ~/../assets/css/ goes up one folder from the SCSS file and then into assets/css/. With your SCSS in scss/style.scss, the output is assets/css/style.css.
• autoprefix is the extension’s vendor-prefix option; the snippet sets it to an empty list.

Save the file and click Watch Sass in the status bar to start compiling. If this setup doesn’t fit your project, the Stack Overflow discussion on this setting has other possible fixes.

Related articles

• SCSS partials explained: why files that start with an underscore get no CSS file of their own
• the 7-1 Sass folder structure: a way to organize the SCSS files you compile