Now it's possible to compile easily your SCSS files into CSS files within Visual Studio Code, Just like this

Live Sass Compiler

This is an extension for VsCode which let you compile are your scss files into css files easy and inside the code editor itself all what you gonna do is to look for this extension in VsCode marketplace and tap Live Sass Compiler. Live Sass Compiler Extension. Make sure it's from Ritwick Dey, and hit install that's it.

After installing the Live Sass Compiler once the extension detect any SCSS files in your folder project you will see a little button appears in the bottom of VsCode saying Watch Sass, the only thing you need to do is to hit that button and the extension will listen to any changes you'll make in your SCSS files and it will regenerate the output CSS file. Live Sass Compiler.


But you may need some configuration to match your needs and what you are looking for, it's totally okay just go to User Settings file you can find it under here. Live SCSS Compiler Configuration

After opening the User Setting file you will need to modify how do you want to locate your css output file let's assume that is my project structure Vscode Project Structure I have all my SCSS files under scss folder and I want may main.css to locate in css folder so all I need is to go to our User Setting json file and add this code:

    "liveSassCompile.settings.formats": [
        // This is Default.
        // {
        //     "format": "expanded",
        //     "extensionName": ".css",
        //     "savePath": "~/../css/"
        // },
        // Or you can compress your css
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"

Of course if you want to compress your css file just live like this but if you want it to expanded you can uncomment that part it depends on you. and as you may see SavePath I set to look for css folder and extensionName always should be ".css".

Another thing is if you want the extension to not generate the .map file just add line to User Setting file as well

    "liveSassCompile.settings.generateMap" : false,

Another last thing in this configuration you may need to do is Auto Prefixing, how you want the output css to be if you want to to auto prefix the properties that are not supported from other browsers or different version of browsers, you'll need to add this line as well.

    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"

This wil specify what browsers to target with an array of strings (uses Browserslist for more informations).


I think that's all for now, this is how you can compile your SCSS files to CSS in an easy and simple way, it only need and extension in the same editor without installing another application like Koala or others. There is a plenty other solutions but this one is one of the most efficient solution and the easiest.