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
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
for the less and img content. I placed the js into
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
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 !PreBuild.cmd %1
:: Remove quotes from project path...
:: Remove quotes from _devenv path
:: 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.