UPDATE (29-SEP-2015):
Leave Web Essentials and use LESS Compiler along with its Clean CSS Plugin.
- Download and install Node.js (32-bit) for Windows.
- Open node.js command prompt.
- Install LESS using the command: npm install -g less
- Install less-plugin-clean-css using the command: npm install -g less-plugin-clean-css
- 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"
- 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.)
- 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.
- 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:
- Download and install Node.js (32-bit) for Windows.
- Install RECESS npm package globally – Open node.js command prompt and run the command:
npm install recess –g
- 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.
- 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"
- 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.)
- 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.
- Select all .less files from \Content\bootstrap folder. View file properties and set its “Build Action” to “None”.