17

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.

Santosh
  • 2,430
  • 5
  • 33
  • 47
  • Is there a reason you don't want to use BundleTransformer.Less? Can't get much simpler than that. – Cavyn VonDeylen Oct 01 '13 at 15:28
  • I tried BundleTransformer by following all the steps mentioned in the documentation, but the application throws error (500 internal server error). I tried lot of debugging but could not pinpoint the issue. – Santosh Oct 02 '13 at 16:25
  • 1
    I think that [BundleTransformer](http://bundletransformer.codeplex.com/) would be the best choice at this point. Whatever relies on [dotless](http://www.dotlesscss.org/) it's not going to work with the new version of LESS, which means that [Bootstrap 3.0.0](http://getbootstrap.com/) and mostly any other framework that rely on the latest LESS will not be compiled. – Roland Oct 17 '13 at 13:34
  • 1
    Also see: advanced customization of the Twitter Bootstrap library in Visual Studio: http://tarkus.me/post/70489442659 – Konstantin Tarkus Dec 19 '13 at 14:54

2 Answers2

34

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”.
Santosh
  • 2,430
  • 5
  • 33
  • 47
  • 1
    Thanks - brilliant. A small point to add - you might want to disable the "Generate CSS file on save" and "Minify generated CSS files on save" within Tools/Options/Web Essentials/Less. – Steve S Jan 23 '14 at 09:01
  • 4
    Version 3.1 of Bootstrap has switched from Recess to grunt-contrib-less. As Visual Studio WebEssentials uses grunt for Less, I've switched to using that. – Steve S Feb 03 '14 at 12:13
  • You might need to right the "-g" manually instead of coping it from here. It's > npm install recess "-g" – hsobhy Mar 23 '14 at 03:25
  • @SteveS: Web Essentials does not use Grunt. (it invokes `lessc` directly) – SLaks Mar 23 '14 at 03:45
  • Following the above steps produced an error for me. I needed to also add the path to recess into my PATH environment variable. After that it works great! Thanks. set path=%path%;%APPDATA%\npm;%PROGRAMFILES(X86)%\nodejs – Scott Obert Sep 25 '14 at 14:56
8

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

   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"
Rodrigo Porcionato
  • 145
  • 1
  • 2
  • 16