How to compile Twitter Bootstrap 3.0 LESS using Asp.net MVC 5 and Web Essentials 2013

Question

I've set up Visual Studio 2013 RC and Web Essentials 2013. I'm trying to create an Azure Cloud Service and a Web Role using ASP.Net MVC 5. Installed Twitter Bootstrap Less Source 3.0 and wanted to bundle all less files using Web Essentials 2013.

I did not get any help or documentation on how to go about bundling bootstrap.less at run time or compile it into a bootstrap.css at design time.

Any idea how it can be done? Is there any simpler way than BundleTransformer.Less.

Solution 1

UPDATE (29-SEP-2015):

Leave Web Essentials and use LESS Compiler along with its Clean CSS Plugin.

1. Download and install Node.js (32-bit) for Windows.
2. Open node.js command prompt.
3. Install LESS using the command: npm install -g less
4. Install less-plugin-clean-css using the command: npm install -g less-plugin-clean-css
5. Go to Project Properties > Build Events and copy-paste below command to Pre-build event command line box:
   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less" "$(ProjectDir)Content\bootstrap.css" --clean-css="--s1 --advanced"
6. Build the project and look for bootstrap.css at the specified location. (If not already, you may need to enable “Show All Files” settings in the Solution Explorer.)
7. Include the bootstrap.css file into your project. View file properties and set its “Build Action” to “Content”. Update BundleConfig to include this compiled file into your StyleBundle.
8. Select all .less files from \Content\bootstrap folder. View file properties and set its “Build Action” to “None”.

---

UPDATE (24-SEP-2014):

Since Twitter Boostrap has switched from RECESS to Grunt, I would recommend the new users looking for this solution to consider: LESS Compiler or Grunt.

Please note that none of the solutions mentioned here use Web Essentials 2013.

---

Finally, I decided to use RECESS recommended by Twitter. If you want to use pre-built bootstrap 3 less into css using Visual Studio 2013 (RC / RTM), you can follow the steps given below:

1. Download and install Node.js (32-bit) for Windows.
2. Install RECESS npm package globally – Open node.js command prompt and run the command:
   npm install recess –g
3. Use NuGet Library Package Manager and install the Bootstrap Less Source 3.0.0 package to your Asp.Net MVC 5 Web / Azure Web Role project.
4. Go to Project Properties > Build Events and copy-paste below command to Pre-build event command line: box:
   recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
5. Build the project and look for bootstrap-compiled.css at the specified location. (If not already, you may need to enable “Show All Files” settings in the Solution Explorer.)
6. Include the bootstrap-compiled.css file into your project. View file properties and set its “Build Action” to “Content”. Update BundleConfig to include this compiled file into your StyleBundle.
7. Select all .less files from \Content\bootstrap folder. View file properties and set its “Build Action” to “None”.

Solution 2

Is possible to use 'lessc' command with same approach sample:

   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"

Comments

[Roland]

I think that BundleTransformer would be the best choice at this point. Whatever relies on dotless it's not going to work with the new version of LESS, which means that Bootstrap 3.0.0 and mostly any other framework that rely on the latest LESS will not be compiled.

[Konstantin Tarkus]

Also see: advanced customization of the Twitter Bootstrap library in Visual Studio: tarkus.me/post/70489442659

[cchamberlain]

For people just coming on, this seems like the best practice approach going forward.