How do I setup Bootstrap SASS/SCSS with Visual Studio 2013?
sass, twitter-bootstrap, visual-studio-2013
Solution
This is actually pretty simple so long as you're running Visual Studio 2013 Update 2+ and (I think its needed, not sure) Mads Kristensen's superb Web Essentials add-in.
First, update your Bootstrap NuGet package so it matches, near as possible, the version available on the official Twitter Bootstrap SASS port (they originally write it in LESS and port to SASS).
At the time of writing, NuGet is on 3.3.2 and the SASS port is on 3.3.3, though the tarball says otherwise.
Here's the SASS port on GitHub:
https://github.com/twbs/bootstrap-sass
Then remove the following files from you project:
- `\Content\bootstrap.css`
- `\Content\bootstrap.min.css`
Then download the "tar ball" zip from GitHub above and unpack it somewhere. You'll only need the SCSS files, so open the following folder:
`bootstrap-sass-3.3.2.tar\bootstrap-sass-3.3.2\bootstrap-sass-3.3.2\assets\stylesheets`
Copy the `bootstrap` subfolder and stick it in your project `\Content` folder.
Now, add a new item to the `\Content` folder in Visual Studio and choose "SCSS Style Sheet (SASS)" and call it `bootstrap.scss`
It's important to add a new item since it enables the auto-generation stuff, if you just add an existing `.scss` file it doesn't generate/compile the CSS.
Open the new `bootstrap.scss` file and clear it of any default code.
Now go back to your unpacked folder and open the `_bootstrap.scss` file in a Notepad and then copy the contents and paste them into the `bootstrap.scss` file in Visual Studio.
Save the file and it will compile `bootstrap.css`! It will also produce the `.map` file which is used by editors (like Chrome's browser dev tools) to map the gen'ed CSS back to its original SASSy markup. Clever.
Right-click the `.css` file to minify it and choose the option to auto-minify on changes.
Since you've now regenerated the same files as were originally there, your bundles will just work and the site will come up as before.
Oh and to edit your variables, like the fonts, see:
`\Content\bootstrap\_variables.scss`
Problem
Bootstrap is already setup with a new ASP.NET project from the default template, but I would like to use the SASS version of Bootstrap so I can customize it, such as altering the font variables. How do I set this up? Do I need tools like `npm`, `Bower` and `Grunt`? I get a bit lost.