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

Here's what I did [here in July of 2019] in Visual Studio 2017;

I installed the "The Bootstrap Authors, Twitter Inc." version of bootstrap.sass (v4.3.1) straight from the nuget.org server. I then looked all over the place for info on exactly which file(s) I was going to want to 'compile' from .scss to .css and finally found this post.

@SandroPaetzold's answer seemed a bit.. excessive / slightly confusing [given how much easier it is to install the package with NuGet], so I decided to write up my process in case it helps anyone who wants to use the SASS version of Bootstrap 4 in their ASP.Net MVC project/solution.

I just use Mads K's WebCompiler, so I had to create the compilerconfig.json file [required by the WebCompiler tool]. For this I was able to copy it from another project I'd just completed, then made the changes needed for bootstrap, which was to simply compile the bootstrap.scss file into my ~/Content folder. This way, I didn't have to touch the BundleConfig.cs file.

(Now, admittedly, if I was going to have more than say, 2-3 .css files, I would have put them into something like ~/Content/css as I did with that other project I mentioned, but I didn't feel that it was a necessary step in this case.)

So, the entirety of my compilerconfig.json was simply:

[
  {
    "outputFile": "Content/bootstrap.css",
    "inputFile": "Content/bootstrap/bootstrap.scss",
    "options": {
      "sourceMap": true
    }
  }
]

At this point, I went into the Task Runner Explorer, right-clicked on Content/bootstrap/bootstrap.scss (within the left-hand-pane), then selected Before Build from the Bindings context menu.

Finally, since they're being Built, and thus don't really need to be checked in, I added Content/*.css to my .gitignore file. (Note: Your path may vary.)

This, to my mind, is the least amount of churn for getting this process completed, at least compaired to the other answers. (Acknowledging that some, if not all of those answers are dealing with other/earlier versions of Bootstrap, and thus may require a bit of extra work.)

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