如何在 VisualStudio2017 + 中编译 Less/Sass 文件

在 VS < = 2015中,我们可以使用 WebEsentials 扩展来为我们编译 less/sass 文件,但是目前它不支持 VS 2017。是否有类似的扩展可以在构建时编译 Less/Sass?

97473 次浏览

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.

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

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

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.

Simple answer: