Can't compile nested less files with Web Compiler 2015

Question

well, I was quite surprised when installing Web Essentials 2015 for Visual Studio 2015 that it didn't include a less compiler anymore: "Web Essentials 2015 no longer contains features for bundling and minifying of JS, CSS and HTML files as well as compiling LESS".

Everything worked fine before with Visual Studio 2013. So I downloaded Web Compiler 2015, as it is the new compiler from Mads Kristensen. But, after adding all the needed files to be compiled to the compilerconfig.json, I have an error on compilation that it doesn't recognize my variables anymore nor my mixins!

Here's my site.less:

/* Colors and common variables */
@import "Colors";
@import "Variables";

/* Reseting default values for all internet browsers */
@import "Reset.css";

/*  BootStrap   */
@import "../../../Content/bootstrap/bootstrap.less";

/* Basic mixins */
@import "mixins/Generic_Mixin.less";
@import "mixins/Controls.less";
@import "mixins/Images.less";
@import "mixins/Navigation.less";
@import "mixins/Text.less";

/* Website specific classes */
@import "Controls.less";
@import "Footer.less";
@import "Header.less";
@import "Images.less";
@import "Text.less";
@import "combobox.less";

@import "Sitemaster.less";

And here's one of my many errors :

variable @font-size-base is undefined on line 49 in file
'C:\Users\(...)\Site.WebApp\App_Themes\Default\Styles\mixins\Variables.less':

Please, I don't understand anything to all of this, anyone would have an answer for me ? Thx.

Answer 1

I had the same problem. Web Compiler failed in many ways and the workarounds were messy and wouldn't have been easy to support. Future versions of Web Compiler might be useful, but I came to the conclusion that it's worth the trouble to just switch to a more mature less compiling tool.

This is what worked for me: Disable Web Compiler Tools->Extensions and Updates->Installed(search for Web Compiler)->Disable

Then setup Grunt.js by following one of the many tutorials out there. I used this one by Scott Hanselman: http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx

Here's another guide I found very useful: https://www.orderfactory.com/articles/Bootstrap-LESS-Grunt-VS.html

Since it sounds like you were basically where I was before I followed these instructions, there's a chance you might run into another issue with TypeScript compiling, which Web Compiler turned on by default.

If you get a bunch of "duplicate identifier" errors related to lib.core.d.ts, you may have to disable automatic typescript compiling: right-click Project->Properties->TypeScript Build->uncheck "Compile on save"

Installing Web Compiler and setting up node tools and assigning an automated task can result in unleashing the ts compiler to run through all the node_modules, looking for things to compile. It can be a mess.

If you want to leave TypeScript compiling on build, you'll need to add a tsconfig.json file to the root of your project to define specific file paths. Without this file, the compiler looks everywhere and you really don't want that. I found it easier to just disable it.

Here's more information on that: Typescript, confusing "duplicate identifier" error message

Hope this helps.