How do I setup Bootstrap SASS/SCSS with Visual Studio 2013?

Question

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.

Answer 1

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

Answer 2

Here are the steps to be taken to install Bootstrap 4.x with ASP.NET MVC with Visual Studio 2018. I assume you already updated your Bootstrap NuGet package and installed the latest Version of Web Essentials as mentioned in .

1. Download Bootstrap and unzip the source files
2. Delete ALL Bootstrap CSS files from your /Content directory
3. Move the scss folder to the `/Content' folder of your project
4. (Optional) Rename /scss to /bootstrap
5. Compile bootstrap.scss
6. Open AppStart/BundleCongig.cs
7. Change ~/Content/bootstrap.css to match the path to your Bootstrap file