How to import bootswatch themes into react-bootstrap?

Question

I created a basic React application using CRA and react-bootstrap. I would like to load different bootswatch themes. All themes are downloaded and placed inside a src/themes folder. Each theme has its own folder with fixed set of filenames:

src/themes/

  superhero/
  _bootswatch.scss
  _variables.scss
  bootstrap.css
  bootstrap.min.css

  /cerulean
  _bootswatch.scss
  _variables.scss
  bootstrap.css
  bootstrap.min.css

  and so on...

Now suppose I want to load superhero theme. This can be done in different ways which I show below:

1. I renamed index.css of CRA to index.scss and added the following lines to the top of the file (I have node-sass installed):

   @import "./themes/superhero/variables"; @import "~bootstrap/scss/bootstrap"; @import "./themes/superhero/bootswatch";

2. I add the following line to index.js:

   import './themes/superhero/bootstrap.min.css'

Both of these methods are working fine independently. What I want to do is to import them in index.js like this:

import './themes/superhero/_variables.scss' import 'bootstrap/scss/bootstrap.scss'; import './themes/superhero/_bootswatch.scss'

When I do this, the first two lines get imported properly but I receive undefined variable errors when it comes to the third import, _bootswatch.scss. This is because the first two files are independent. I think there are dependent variables in the third file but on each import they are somehow scoped differently and hence the last import does not have access to the variables. This is not the case for method 1, they are all imported to a single file and then node-sass takes care of them.

Any ideas how to solve the issue?

Answer 1

As far as I know, you have to choose the first one if you want to use the scss versions of the bootswatch themes to override some variables or whatever you want to do with them. The scss files will be preprocessed and converted into one single css file. So when you import an scss file in a js file the scss file will be converted into a normal css file and that will be imported into your js file at the end of the whole process. Therefore, the variables scss file will be a single css file that cannot visible from a different file. That is why you have to import the variables inside an scss file, to be availabe in build time. (Also, the _ shows you in the filenames those files are partials).

I use the bootswatch themes as well a lot and I always use them as you described in your first option, import all of them inside my own index.scss file or whatever and then that file can be imported inside any js file:

// here goes my personal variables
@import "./themes/[theme_name]/variables";
@import "~bootstrap/scss/bootstrap";
@import "./themes/[theme_name]/bootswatch";

Check the offical sass guide site, preprocessing section: https://sass-lang.com/guide