Building Twitter Bootstrap With Visual Studio 2010

7. June 2012 12:11

I've been a big fan of the Chirpy Add-In for Visual Studio for a couple of years now. Recently I started work on a project where it made sense to use Twitter Bootstrap as a base set of CSS and JavaScript within an ASP.Net MVC 3 project. Since I needed to adjust the colors, and a few other settings, I figured it would be simple enough. Unfortunately the main .less files use @import directives in order to include the necessary files in the correct order, which Chirpy doesn't seem to support.

I came across another blog post that mentions using dotLess in the same scenario to build the .less files as a pre-build event. I went a slightly different route. Instead of using dotLess, I went with NodeJS and lessc as the compiler, this also allows me to use cssmin as a css minifier within the same build event.

First, you will want to download the latest Bootstrap source files, placing the less and img folders within the same parent. In this case, I used ~/Content/bootstrap/less and ~/Content/bootstrap/img for the less and img content. I placed the js into ~/Scripts/bootstrap.

Second you will want to download and install the latest NodeJS for windows. After that, from a command prompt, you're going to need to use the Node Package Manager (npm) to install the global utilities for less and cssmin from a command prompt.

npm -g install less
npm -g install cssmin

Third, you'll need to setup your Post-build event. Right-click the web project, then select properties. Then bring up the "Build Events" tab. From there, I have the following text in my "Pre-build event command line"

"$(ProjectDir)!PreBuild.cmd" "$(ProjectDir)" "$(DevEnvDir)"

With that in place, I added a "!PreBuild.cmd" batch file into the root of the project with the following content. (note: make sure the file is saved with DOS/ASCII encoding mode text, not UTF. Create it in Notepad if need be)

@echo off

echo !PreBuild.cmd %1

:: Remove quotes from project path...
SET _projpath=%1
SET _projpath=###%_projpath%###
SET _projpath=%_projpath:"###=%
SET _projpath=%_projpath:###"=%
SET _projpath=%_projpath:###=%

:: Remove quotes from _devenv path
SET _devenv=%2
SET _devenv=###%_devenv%###
SET _devenv=%_devenv:"###=%
SET _devenv=%_devenv:###"=%
SET _devenv=%_devenv:###=%

:: Checkout the files to be built
"%_devenv%tf" checkout /lock:none "%_projpath%Content\bootstrap\css\*.*"

echo Build bootstrap.less
call lessc "%_projpath%Content\bootstrap\less\bootstrap.less" "%_projpath%Content\bootstrap\css\bootstrap.css"
call cssmin "%_projpath%Content\bootstrap\css\bootstrap.css" > "%_projpath%Content\bootstrap\css\bootstrap.min.css"

echo Build responsive.less
call lessc "%_projpath%Content\bootstrap\less\responsive.less" "%_projpath%Content\bootstrap\css\responsive.css"
call cssmin "%_projpath%Content\bootstrap\css\responsive.css" > "%_projpath%Content\bootstrap\css\responsive.min.css"

With the above pre-build batch in place, the css directory will be checked out, and the bootstrap css files will be created with a minified version.


Comments are closed


Michael J. Ryan aka Tracker1

My name is Michael J. Ryan and I've been developing web based applications since the mid 90's.

I am an advanced Web UX developer with a near expert knowledge of JavaScript.