How to Compile Bootstrap Sass in Visual Studio 2013

2015/7/312 min read
bookmark this
Responsive image

So I want to compile bootstrap sass, I searched online of Bootstrap website. It contains bootstrap supports SASS but it doesn't contain detail of how to compile the SASS. That's make sense at the bootstrap site because there are so many tools could compile sass into css. I know the visual studio 2015's compiler plugin is very easy to let you compile bootstrap sass into css. But I'm in visual studio, first since I like use npm, node.js package management system. So I wonder npm must contains some sass compiler. So I found following, this could work but require grunt file setup and also need ruby, compass. 

That's a lot of work...

grunt-contrib-sass

So, what I end up with...

WebEssentials

WebEssentials is a web tools for visual studio, first I run nuget to get SASS version of bootstrap.

Then I just create another file as bootstrap.scss and copied the code from _bootstrap.scss to mine bootstrap.scss.

Save, then that's cause WebEssentials to compile the scss to css for me, sweet!

Now, you can start change the variable inside the bootstrap scss to use the real power of bootstrap.

 

  • 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 libsass library. All information about libsass itself could be found in readme file under NSass.LibSass directory.