VS Code SCSS auto compiling to CSS

Question

I am total beginner in programming and just started to learn HTML/CSS. For coding I started to use VS Code. And I really like it.

Only problem so far, what I got, is auto compiling of SCSS to CSS. I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.

Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately. I tried also Atom, and it has sass-autocompile package , and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.

So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.

Answer 1

You will need two things:

• tasks.json file
• Blade Runner extension for VS CODE

Start by creating .vscode folder in your project.

Then in it create tasks.json file with the following content:

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

Now, after opening the project you can run the task by clicking Ctrl+Shift+B .

To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

Blade Runner will run the task automatically after opening the project :)

Answer 2

A solution without additional extensions

With sass

Assuming you have sass installed globally with for instance:

npm install -g sass

Open the folder and create a task.json file under .vscode containing

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "label": "Watch Sass",
        "type": "shell",
        "command": "sass --watch src/style.sass styles/style.css --style=compressed",
        "problemMatcher": [],
        "group": {
            "kind": "build",
            "isDefault": true
        },
        "runOptions": {
            "runOn": "folderOpen"
        }
    }]
}

With node-sass

Replace sass with node-sass in the above.

In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)

Or copy the section in your .vscode-worskpace to avoid clutter. Make sure to change the sass source and destination files to your personal needs.

Now allow automatic run tasks by

1. Ctrl+Alt+P
2. select Manage automatic Tasks and
3. select Allow Automatic Tasks in Folder and
4. close and reopen your folder (or Workspace)

The sass compiler will be called and starts watching all your edits with a reassuring:

Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.

or with error messages when compilation failed.:

Error: semicolons aren't allowed in the indented syntax.
  ╷
7 │     padding: 0;
  │               ^
  ╵
  css\src\_base.sass 7:12  @import
  css\src\style.sass 1:9   root stylesheet

Answer 3

Or use Easy Compile - it will auto compile on save.

https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile

Answer 4

Easy Compile or Live SASS Compiler extensions for Visual Studio Code. The Live SASS Compiler can recompile all sources, whereas Easy Compile just compiles a single file.

Easy Compile compiles when you save a file, whereas Live SASS Compiler can be made to watch your code and compile when it sees a change. You must manually start it every time, whereas Easy Compile runs out of the box.

Answer 5

There already is an official document out there https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson

Only tip we can consider here is put an argument of --watch just not to build manually by hitting ctrl+shift+b every time.

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "sass --watch styles.scss styles.css",
      "group": "build"
    }
  ]
}

Without any plugins, you can create .vscode folder in your project and just write some tasks.json