Working with LESS and SCSS in Visual Studio 2015

I am demonstration a simple example to start working with LESS and SCSS in visual studio 2015.

First Set up web compiler

scr1

scr2

Click download and install.

Create an empty solution and add a project.

scr3

scr4

Add css folder and add a main.less file. Right click on the LESS file and compile it for first time.

scr5

scr6

It creates a compilerconfig.json where we can mention what are input and output file paths.

scr7

It automatically generates a css file and minified file with same name.

scr8

We can then include it in our html page and start adding css to the LESS file.

We also have the option to recompile the file or remove it from compilation altogether.

scr9

For scss files we follow the same steps.

Going further I added another less file and imported it in our main file and it works absolutely fine. It also generates sourcemap file in the converted scss to css file inline.

You can find the source code at the following github repo. https://github.com/niteshp27/setup-less-and-scss-in-visualstudio

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s