Compile several .scss files with Visual Studio Code

Question

I try to compile several .scss files with Visual Code.

I tried

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "tasks" : [
        {   
            "taskName": "Turquoise.scss",
            "args": ["css/colors/turquoise.scss", "css/colors/turquoise.css"]
        },
        {
            "taskName": "Styles.scss",
            "args": ["css/styles.scss", "css/styles.css"]
        }
    ]
}

in the tasks.json file.

but it is not working. The error is "No configurated generation task"...

My question: How to compile several .scss files (without gulp, npm, etc.)

---

Remark

With

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["css/colors/turquoise.scss", "css/colors/turquoise.css"]
}

it works. I just want to do the same with several files.

Answer 1

Just create a main.scss file being compiled by Visual Code and import all your other stylesheets there. Then you'll have as many scss files as you want, but only one compiled scc file (This also will increase performance on your webserver later on, because there's only one http request for a stylesheet)

Answer 2

That's not direct answer but I achieved what I think you want by:

1. Installing Live Sass Compiler extension
2. Setting liveSassCompile.settings.excludeList to exclude some folders or files (for workspace or globally)
3. Setting keyboard shortcut for liveSass.command.oneTimeCompileSass

This way sass is compiled on demand excluding files I don't want to compile.

Live Sass Compiler: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass