Repository files navigation

A Visual Studio extension that compiles LESS, Sass Stylus, JSX, ES6 and CoffeeScriptfiles.

Download the extension at theVS Galleryor get thenightly build

See thechangelogfor changes and roadmap.

• Compilation of LESS, Scss, Stylus, JSX, ES6 and (Iced)CoffeeScript files
• Saving a source file triggers re-compilation automatically
• Specify compiler options for each individual file
• Error List integration
• MSBuild support for CI scenarios
• Minify the compiled output
• Minification options for each language is customizable
• Shows a watermark when opening a generated file
• Shortcut to compile all specified files in solution
• Task Runner Explorer integration
• Command line interface
• Integrates withWeb Analyzer

Right-click any.less,.scss,.styl,.jsx,.es6 or.coffee file in Solution Explorer tosetup compilation.

A file calledcompilerconfig.json is created in the root of theproject. This file lets you modify the behavior of the compiler.

Right-clicking thecompilerconfig.json file lets you easilyrun all the configured compilers.

Any time a.less,.scss,.styl,.jsx,.es6 or.coffee file is modified withinVisual Studio, the compiler runs automatically to produce the compiled output file.

The same is true when saving thecompilerconfig.json file whereall configured files will be compiled.

In ASP.NET MVC and WebForms projects you can enable compilation as partof the build step. Simply right-click thecompilerconfig.json file toenable it.

Clicking the menu item will prompt you with information about what willhappen if you click the OK button.

A NuGet package will be installed into thepackages folder without addingany files to the project itself. The NuGet package contains an MSBuildtask that will run the exact same compilers on thecompilerconfig.jsonfile in the root of the project.

You can run the compiler on allcompilerconfig.json filesin the solution by using the keyboard shortcutShift+Alt+Yor by using the button on the top level Build menu.

Get a quick overview of the files you've specified or execute acompilation directly in Task Runner Explorer.

You can even set bindings so that compilation happens automaticallyduring certain Visual Studio events, such asBeforeBuild andProject Open.

When a compiler error occurs, the error list in Visual Studiowill show the error and its exact location in the source file.

Source maps are supported for.scss files only for now, but theplan is to have source map support for all languages. Web Compiler differs from it's predecesor, Web Essentials, in that it inlines a base64 encoded version of the map in the generated .css file rather than producing a separate .map file.

The extension adds acompilerconfig.json file at the root of theproject which is used to configure all compilation.

Here's an example of what that file looks like:

[  {"outputFile":"output/site.css","inputFile":"input/site.less","minify": {"enabled":true    },"includeInProject":true,"options":{"sourceMap":false    }  },  {"outputFile":"output/scss.css","inputFile":"input/scss.scss","minify": {"enabled":true    },"includeInProject":true,"options":{"sourceMap":true    }  }]

Default values forcompilerconfig.json can be found in thecompilerconfig.json.defaults file in the same location.