Compiling Bootstrap LESS using Asp.net MVC and Web Essentials

    My goal is to work with others in whatever framework they choose but I'm constantly update css styles with a pre-processor so that I do not have to work with the css libraries directly. Download the  Web Essentials and the Bootstrap less nuget package.


Get this nuget package!
I see it all the time where developers install the wrong packages, sometimes theres ones with similar names and you just not sure what the differences are. So just so we're clear its the first package with the bootstrap .less in the name. Just search for bootstrap less as two seperate keywords, should be no problem.

Solution
For this solution did not have to change thing with my setup or move around files on the directory once I got things up and running. I even made it easier for colleagues to come into web applications without any problems so in case they are new to bootstrap they can simple ignore the less files. Now what I did was create separate bootstrap.less file and did some regular expression @import " replaced with @import "bootstrap\. The reason I did this was to avoid the compiled css to form inside the bootstrap folder. In the documents it states that complied less files with create a css folder from the current directive (where the less file is). Since I'm using nuget packages I wanted to avoid stepping into the folder unless I have to.


Change it like so...
Take note of my folder setup and the fact that Web essentials hasn't yet compiled the bootstrap.less. Once I save Web essentials with begin but I just want to be clear I copied the less file and placed the copy outside the bootstrap folder. So there is still a bootstrap.less files in the bootstrap, which will continue to update as the nuget package gets updated. I can then continue to use that file as a reference for my own bootstrap.less file which might have custom less files. Those custom less I would probably place in the bootstrap folder since the nuget package can simple work around it. So once you save you can open up the "Output" window and watch to the action behind the scenes.


 This ran smoothly but is not you will see why in this same window, the right side panel when you open less files will only give you a warning message that points you to the output window.


Looks good, now all you have to do it point that css in your Asp.net Mvc BundleConfig and your all set!
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/css/bootstrap.css"));

Resources
Guide to getting LESS working with Twitter Bootstrap in MVC 5
ASP.NET MVC5 with Bootstrap 3.1.1 LESS extension
Making Web Development Wonderful Again with Web Essentials

Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync