← Go Back

How to compile SCSS in VS Code


Install Live Sass Compiler from VS Code Extensions tab. (5th icon on the VS Code Activity Bar on the left). If you're not sure about the VS Code User Interface, click here.

How to use it

In a test folder, create index.html and index.scss. Open the folder in VS Code. There are two ways to activate Watch Sass. By activating this, SCSS files will be automatically compiled into CSS files.

First method

  1. In VS Code, press Shift + Cmd + P (Windows: Ctrl+Shift+P) and a Command Palette will appear.
  2. Type Live Sass
  3. Pick the Live Sass: Watch Sass option

VS Code Command Palette

Second method

Click the Watch Sass button on the VS Code Status Bar(most bottom).

VS Code Status Bar

By doing either of this two, the SCSS file will be automatically mapped into a CSS file in the same directory whenever there's any changes to the SCSS file.