For my latest side project, I decided to play around with ASP.NET MVC 4 and Twitter Bootstrap. Bootstrap is a front-end toolkit open sourced by Twitter engineers, and comes chock-full of goodies like a responsive grid framework, LESS, jQuery plugins and CSS3 styling.
I’ve heard a lot about CSS compilers like Sass and LESS, but thought I would start with LESS first simply because I didn’t have to learn any new syntax. When using LESS in Visual Studio you essentially have three options for compiling:
- Client-side (JavaScript) – Include the LESS.js script in your site and link directly to your .less files. The script will compile your LESS into CSS at runtime. Unfortunately, this means any errors will cause your CSS files to vomit on your live site.
- Server-side (dotless) – Install via NuGet or GitHub. Compiles dynamically via ASP.NET HttpHandler or compiler .EXE. The compiler will convert your .less files into .css files.
- Server-side (Chirpy) – Install via Codeplex (NuGet packages are out of date). This VS add-in not only compiles LESS files it also minimizes JS, CSS, LESS files. You name your LESS files with a .chirp.less extension and Chirpy will compile them in realtime. You can also use a .less.css extension so you can retain Intellisense for CSS.
Installing Twitter Bootstrap
I installed two NuGet packages, the Bootstrap, from Twitter package for the base files and then the Bootstrap, from Twitter Less Source package since I wanted to use LESS. It created /less and /images subfolders under the standard /Content folder in MVC, and loaded the appropriate files from Bootstrap. It added bootstrap.js and less.min.js to the /Scripts folder.
Installing Chirpy
Chirpy’s minify capabilities seemed like a good deal in addition to the LESS compilation so I installed the NuGet package. According to the Chirpy documentation and this blog post from John Hoff (The Brain Donor) on using Chirpy, I set up file groups to “mash” the files together into single .css files which I could then reference from my site. I created a file called
mash.less.chirp.config
and put it in the /Content folder. Here’s what the file contained:
<root> <FileGroup Name="style.css"> <File Path="less/bootstrap.less" /> <File Path="less/responsive.less" /> </FileGroup> </root>
Bootstrap.less and response.less import and load all of the individual .less files included in Bootstrap, so they were the only ones I needed to include.
I also created a file to mash together my JavaScript files. I named the file
mash.js.chirp.config
and put it in the /Scripts folder. Here is what it contained:
<root> <FileGroup Name="site.js"> <File Path="AjaxLogin.js" /> <File Path="bootstrap.min.js" Minify="false" /> <File Path="jquery-1.6.2-vsdoc.js" /> <File Path="jquery-ui-1.8.11.min.js" Minify="false"/> <File Path="jquery.validate.min.js" Minify="false"/> <File Path="knockout-2.0.0.js" /> <File Path="less.min.js" Minify="false"/> </FileGroup> </root>
I then saved, and nothing happened. No magical .css or .js file appeared underneath my special chirp.config files. No errors. Even after I rebuilt the solution, it was eerily Chirpy silent. Something was wrong. So, since Chirpy was technically an Add-In, I went to the Add-Ins menu in Visual Studio and Chirpy was not there! I then poked around on the interwebs and realized the NuGet packages were NOT up to date. So I went ahead and downloaded the .vsi file from Codeplex and installed Chirpy the old-fashioned way.
Almost immediately, my compiled .css file appeared, along with a whole host of CSS errors from the Bootstrap LESS files. I turned to Google, and it led me to lo and behold, another post from John Huff about Twitter Bootstrap woes with Chirpy. Apparently the Chirpy compiler does not like the Bootstrap LESS. His recommended solution was to use the dotless library to compile the LESS files and then use Chirpy to mash and minimize the files.
Installing dotless
So I installed dotless via NuGet. Following the instructions in Huff’s blog post, I added two calls to the dotless .EXE compiler in my MVC project’s Pre-build events (Project -> Properties -> Build Events tab):
"$(SolutionDir)packages\dotless.1.3.0.0\tool\dotless.compiler.exe"
"$(ProjectDir)Content\less\bootstrap.less"
"$(ProjectDir)Content\css\bootstrap.css"
"$(SolutionDir)packages\dotless.1.3.0.0\tool\dotless.compiler.exe"
"$(ProjectDir)Content\less\responsive.less"
"$(ProjectDir)Content\css\responsive.css"
I included quotations around both the .exe and the source and target file paths because my solution and project directories both contain spaces in the path folder names. I created a /css subfolder in my /Content directory to hold the generated .css files. After doing an initial build, I navigated to the /css folder, saw the two new files (with shiny CSS culled from all those Bootstrap LESS files), and added them to my VS project.
Updating Chirpy
I then updated my mash.less.chirp.config file to mash together the newly compiled .css files instead:
<root> <FileGroup Name="style.css"> <File Path="css/bootstrap.css" /> <File Path="css/responsive.css" /> </FileGroup> </root>
And voila, my style.min.css file appeared within a few seconds after saving and building the project, and it included the minified CSS from both .css files! I then updated my site template to use “style.min.css” as my stylesheet.
Sure, it would have been nice to only have to use Chirpy, but since I really wanted to use Bootstrap for this project, and for some reason Bootstrap and Chirpy just don’t get along at the moment, this is a perfectly fine workaround for the time being.
