How to compile Less/Sass files in Visual Studio 2017+

Question

In VS <= 2015 we can use a WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Is there a similar extension that can compile Less/Sass on build?

Solution 1

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.

Solution 2

UPDATE - I have added an additional answer as 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 ...

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

Comments

[Caverman]

I downloaded and installed the extension. I then opened up my Site.less file and I can see where the watermark is there to tun on the compiler. I then did a build on my site as well as opened it up in debug mode. When I open my Site.css, which is under the Site.less, it has the Generated watermak on it. I then try to do a search for a newly added property but it's not there and I'm not getting my CSS. Any ideas on how I can get it to build my LESS?

[Andy Brown]

I don't understand this comment! Not sure which the accepted answer is, but none of them is at all similar to the one I gave.

[Mihail Shishkov]

The accepted answer is the one with the green tick on it. Currently it has the most upvotes and it suggest using the same Web Compiler extension. Anyway I like your answer because of the pictures.

[Andy Brown]

Thanks. My answer gives a solution without using Gulp/Grunt, and also gives the extra detail that people will need. I looked at the ticked answer (among others), but it didn't solve my problem without the extra info above - hence why I took the effort to post, just to avoid others wasting the same time I'd spent trying to resolve this.

[Keith Nicholas]

try reading the accepted answer, it is saying the same thing, but also suggests how to use Gulp

[radbyx]

Good thing I scrolled all the way this time. I was just about to follow your prev. answer. Maybe you should update it with a note, if you think the answer doesn't work anymore. :)

[radbyx]

Worked like a charm. Thanks alot.

[Andy Brown]

OK, I see now the accepted answer does say the same thing - so mine just adds more detail. Hopefully lazy readers like me may find this useful!

[Stato Machino]

This is a better answer than the high scorer: more complete, and points out the key usage factor, the config file and setting. Mads stuff frequently requires some extra steps that are not quite so obvious as they could be.

[sparkyShorts]

The tidbit that makes this stand apart was the information about the compilerconfig.json... Helped me find a bug in my input/output declarations.

[Matt G]

If you already have Web Compiler and are facing the same errors described in this post, see my posts here: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/…

[klewis]

I'm using Web Compiler as an extension in VS 2019 to help compile some very old .less files and its still working great.

[Alex from Jitbit]

NOTE: Web Compiler is abandoned, last update was 5 years ago. Has some unfixed issues, but kinda works.

[neizan]

Web Compiler worked for me in VS 2019, but it won't auto-recompile .less out of the box. You must run the compilation once manually (see this answer) for the compilerconfig.json file to be created. After that, it will auto-recompile .less files.

[Andy Brown]

I've just downloaded Web Compiler for Visual Studio 2019, and so far it's working perfectly. Are any issues specific to Visual Studio 2017?