How do I update Bootstrap with -bootswatch.scss?

Question

I'm new with SCSS and I'm trying to upgrade a site that is using Bootstrap 3 over to using Bootstrap 4. With Bootswatch 3 I would just replace the bootstrap.less and variables.less file with the theme download from Bootswatch. However, with the SCSS version, the file is labeled _bootswatch.scss and not _bootstrap.scss. Do I just name the the bootswatch file to the bootstrap name and then overwrite that file in my project or do I just need to include the _bootswatch in my @imports below importing bootstrap? Also the _variables.scss from bootswatch has a lot less settings than the one from bootstrap. So, I'm assuming I would not actually replace the _variables from bootstrap and just import the bootswatch version after the bootstrap import?

UPDATE

This is what I have in my Site.scss but it doesn't seem to be picking up the style. The folder structures are the correct path. They were created by Visual Studio's intelisense. I'm assuming this should work.

@import "SASS/bootstrap/bootstrap.scss";
@import "SASS/bootswatch/cerulean/_bootswatch.scss";
@import "SASS/bootswatch/cerulean/_variables.scss";

score 5 · Answer 1 · answered Aug 15 '18 at 19:35

See docs at https://github.com/thomaspark/bootswatch.

He says:

Make sure to import Bootstrap's bootstrap.scss in between _variables.scss and _bootswatch.scss!

So this is what I'm using:

//The order of the next 4 lines must be: my variable overrides (optional), bootswatch _variables, bootstrap, bootswatch _bootswatch
@import "variables";
@import "bootswatch_theme_slate/_variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "bootswatch_theme_slate/_bootswatch";

score 0 · Answer 2 · answered Dec 29 '17 at 16:59

0

Import it below in the bootstrap.scss file.

@import "bootswatch";

answered Dec 29 '17 at 16:59

Olivier Van de Velde

142
2
8

Watching some videos I saw where you could do a short cut and not include the underscore or the .scss file extension but I'm assuming the wouldn't stop it from working either? Does the update I posted look like it should work? – Caverman Dec 29 '17 at 19:19
If you add it to the bootstrap.scss then you need to recompile the bootstrap.min.css. I use prepros for this. – Olivier Van de Velde Dec 29 '17 at 20:29

score 0 · Answer 3 · answered Dec 31 '21 at 07:32

Simply import following

@import "~bootswatch/dist/cerulean/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/cerulean/bootswatch";

Note that using ~<modulename> you can directly refer the path of that module under node_modules directory. and you can see your scss files at the above given path.

How do I update Bootstrap with -bootswatch.scss?

3 Answers3