How to compile less/sass files in Visual Studio 20

Question

In VS <= 2015 we can use WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Are you aware of similar extension that can compile less/sass on build?

Answer 1

UPDATE - PLEASE READ DOWN THIS PAGE, AS I HAVE ADDED AN ADDITIONAL ANSWER (THIS ONE NO LONGER SEEMS TO WORK FOR ME).

For those, like me, who don't know Gulp or Grunt or Shriek or Wail, and don't want to, you CAN get Visual Studio 2017 to compile your SCSS files automatically, just like it used to in Visual Studio 2015. The steps below worked for me.

First uninstall any old extensions/Nuget packages for Web Compiler (I don't know if this is necessary or not).

Go to the VSIX gallery download page and choose to download Web Compiler.

Note that I did this first by choosing Tools / Extensions and Updates in Visual Studio. Although this seemed to work, I discovered that my partial SCSS files weren't being automatically compiled to CSS when I made changes to them (I wasn't the only one).

You should now be able to right-click on your master SCSS file and choose the options shown below, which should automatically create a file called compilerconfig.json in the root of your project (this step is probably unnecessary if you already have this file):

From this point on, everything seemed to work OK. Phew! Thanks to Mads Kristensen by the way for this extension - anything to avoid learning something new ...

Answer 2

My previous answer worked for me for a few months, but now no longer works. When I try compiling, I get a message in the Errors window about problems with the CompilerConfig schema, and can't solve this (neither Googling nor installing/uninstalling helped).

So an alternative answer is to use CompileSASS, which is a much simpler add-in, with (much) less online documentation, but which works beautifully. The only downsides I can see are:

• the CSS generated is in the same folder as the SCSS, so I've had to move things around a bit in my website to accommodate this; and
• the CSS generated is minified only, as far as I can see

Once you've installed the add-in (I'm using VS 2017), you can go into Tools > Options to change settings:

Here's hoping I can now resume work! Thanks to all add-in authors, by the way - don't mean to whinge.

Answer 3

WebEssentials is being split up into multiple extensions. I believe the functionality you want is now in the Web Compiler extension.

If you want to do it without extensions, you could use a task runner like Gulp. See here for a walkthrough of how to integrate Gulp tasks into VS.

Answer 4

There is now also a less specific compiler. https://github.com/madskristensen/LessCompiler

Answer 5

Simple answer:

• to compile both LESS & SASS files: Web Compiler or Web Essentials 2017(include many extensions)
• to compile only SASS (SCss) fiels: CompileSass
• to compile only LESS files: LESS Compiler