CODEWITHSUNDEEP
csssassvisual-studio-code
Janis.B
Janis.B

Reputation: 141

VS Code SCSS auto compiling to CSS

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.

Upvotes: 14

Views: 29087

Answers (5)

theking2
theking2

Reputation: 2870

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)

With a Workspace file

Or copy the section in your .vscode-workspace file to avoid clutter of .json files.

Make sure to change the sass source and destination files to your personal needs.

Setup VSCode

[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed. To a llow automatic run tasks

  1. Ctrl+Shift+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

EDIT command and args can be separated

{
    "label": "Compile sass",
    "type": "shell",
    "command": "sass",
    "args": [
        "--watch",
        "--style=compressed",
        "./style/src/main.sass",
        "./style/main.css"
    ],
    "runOptions": {
        "runOn": "folderOpen"
    }
},

Upvotes: 4

goodhyun
goodhyun

Reputation: 5002

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

Upvotes: 2

Leander
Leander

Reputation: 752

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.

Upvotes: 1

Prima
Prima

Reputation: 101

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

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

Upvotes: 2

gabrieln
gabrieln

Reputation: 91

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 :)

Upvotes: 9

Related Questions