Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 560
Janis.B Avatar asked Mar 01 '17 17:03

Janis.B


People also ask

Is it possible to automate SCSS compilation to CSS using VS Code?

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. Show activity on this post. Start by creating .vscode folder in your project.

Is it possible to assign classes to HTML elements using SCSS?

Besides SCSS intelliSense, you can also try SCSS Everywhere which gives you suggestions when you are assigning classes to HTML elements. Show activity on this post. Yes, You need to install a vs code extension.

Can you edit CSS in Visual Studio Code?

CSS, SCSS, and Less support in Visual Studio Code CSS, SCSS and Less Visual Studio Code has built-in support for editing style sheets in CSS.css, SCSS.scss and Less.less. In addition, you can install an extension for greater functionality.

How to install smart-CSS-autocomplete in Visual Studio Code?

Search for smart-css-autocomplete Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Run npm install in this folder. Open VS Code on this folder. Press Ctrl + Shift + B to compile the extension. Switch to the Debug viewlet. Select Launch Client from the drop down.


3 Answers

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

like image 91
goodhyun Avatar answered Oct 19 '22 06:10

goodhyun


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+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
like image 34
theking2 Avatar answered Oct 19 '22 05:10

theking2


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

like image 34
gabrieln Avatar answered Oct 19 '22 06:10

gabrieln