How to Compile Bootstrap Sass in Visual Studio 2013
Table of Contents
Introduction
I wanted to compile Bootstrap Sass, so I searched online and on the Bootstrap website. The site mentions that Bootstrap supports Sass but doesn't provide details on how to compile it. That makes sense because there are so many tools that can compile Sass into CSS. I know that Visual Studio 2015's compiler plugin makes it very easy to compile Bootstrap Sass into CSS. But since I'm in Visual Studio 2013 and I like using npm (Node.js package management system), I wondered if npm had some Sass compiler. So I found the following — it could work but requires a Grunt file setup and also needs Ruby and Compass.
That's a lot of work...
grunt-contrib-sass
So, what I ended up with...
WebEssentials
WebEssentials is a web tools extension for Visual Studio. First, I ran NuGet to get the Sass version of Bootstrap.
Then I just created another file called bootstrap.scss and copied the code from _bootstrap.scss to my bootstrap.scss.
Save, and that causes WebEssentials to compile the SCSS to CSS for me. Sweet!
Now, you can start changing the variables inside the Bootstrap SCSS to use the real power of Bootstrap.
Related Tools
-
Web Essentials 2013.5
- If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript, or LESS, then you will find many useful features that make your life as a developer easier. This is for all web developers using Visual Studio.
-
NSass
- NSass is a .NET wrapper around the libsass library. All information about libsass itself can be found in the readme file under the NSass.LibSass directory.
Conclusion
Using WebEssentials in Visual Studio 2013 is the simplest way to compile Bootstrap Sass into CSS. Just install the NuGet Sass version of Bootstrap, create a .scss file, and WebEssentials will automatically compile it to CSS on save.