Not able to add Bootswatch theme to Bootstrap 4?

Question

I'm looking to get started with Bootstrap 4 using SCSS. I think I have Bootstrap 4 with SCSS up and running but I would like to use a theme off of https://bootswatch.com. When I used their themes with BS3 it was straight forward LESS files that you just replaced. With BS4 they have a _variables.scss which is obvious to just replace but then they have a _bootswatch.scss file which I'm not 100% sure what to do with.

I assumed I would just put the _bootswatch partial file in the same location as all the other BS partial files. Then I added @import "bootswatch"; to the end of the bootstrap.scss file and recompiled but that did seem to work.

I've search and can't find any information on this. Their documents mostly show how to insert their precompiled files or use their CDN. There is very little about using their SCSS files.

Try to first import Bootswatch, then the variables file provided by Bootswatch and after that you have the normal Bootstrap things (including Bootstrap's own variables file) — Klooven, Mar 01 '18 at 21:05

score 1 · Answer 1 · answered Mar 02 '18 at 15:49

I did some research and testing and finally got it to work. I wanted to post an answer for others with the same question. Hopefully this will help someone else.

I created a new MVC 5 project and then ran the following NuGet packages.

Install-Package bootstrap
Install-Package bootstrap.sass

This will register Bootstrap and create all of the partial scss files in the Content\bootstrap folder. I then created the Content\scss and copied the _variables.scss and _bootswatch.scss files to that folder.

In my site.scss file I added the following imports to the top of the file.

@import "scss/variables";
@import "bootstrap/bootstrap.scss";
@import "scss/bootswatch";

You'll have to be mindful of the order you place them in, any other order caused it not to work or throw an error due to where the variables are being created and called.

If you research about default! you'll learn that it is the opposite of !important causing that variable to only use that setting if another one is not found. In my mind it would be more accurate to remove the !default values from the Bootswatch _varaiables which is what I did. However, that ultimately didn't seem to affect anything. I still had to use the order above.

I then had to remove any reference to Bootstrap.css in the App_start\BundleConfig.cs file and make sure it references the site.min.css file which will include all the bootstrap classes. Using the Web Compiler plug in for Visual Studio, I had it create and compile the site.min.css for me.

Not able to add Bootswatch theme to Bootstrap 4?

1 Answers1