91

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mihail Shishkov
  • 14,129
  • 7
  • 48
  • 59

5 Answers5

115

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.

Jimmy
  • 27,142
  • 5
  • 87
  • 100
  • 1
    I'm using Web Compiler as an extension in VS 2019 to help compile some very old .less files and its still working great. – klewis Jun 16 '20 at 00:39
  • 2
    NOTE: Web Compiler is abandoned, last update was 5 years ago. Has some unfixed issues, but kinda works. – Alex from Jitbit Sep 17 '20 at 20:25
  • 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](https://stackoverflow.com/a/48685918/1089416)) for the compilerconfig.json file to be created. After that, it will auto-recompile .less files. – neizan Oct 07 '20 at 14:11
52

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.

enter image description here

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

enter image description here

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 ...

RyanfaeScotland
  • 1,216
  • 11
  • 30
Andy Brown
  • 5,309
  • 4
  • 34
  • 39
  • 6
    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. – Andy Brown Feb 09 '18 at 16:15
  • 1
    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. – Mihail Shishkov Feb 09 '18 at 18:21
  • 1
    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. – Andy Brown Feb 10 '18 at 09:42
  • 1
    try reading the accepted answer, it is saying the same thing, but also suggests how to use Gulp – Keith Nicholas Apr 30 '18 at 22:50
  • 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! – Andy Brown Sep 11 '18 at 09:56
  • 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. – Stato Machino Oct 09 '18 at 04:51
  • The tidbit that makes this stand apart was the information about the compilerconfig.json... Helped me find a bug in my input/output declarations. – sparkyShorts Oct 26 '18 at 20:23
9

Simple answer:

S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61
6

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:

enter image description here

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

Andy Brown
  • 5,309
  • 4
  • 34
  • 39
  • 1
    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 Jul 17 '18 at 08:56
  • Worked like a charm. Thanks alot. – radbyx Jul 17 '18 at 09:35
  • 1
    If you already have Web Compiler and are facing the same errors described in this post, see my posts here: https://stackoverflow.com/a/55290276/3609362 https://github.com/madskristensen/WebCompiler/issues/390#issuecomment-475427735 – Matt G Mar 21 '19 at 22:40
  • 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? – Andy Brown Nov 06 '20 at 11:41
2

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

Justin
  • 6,373
  • 9
  • 46
  • 72
  • 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? – Caverman Apr 21 '17 at 20:47