how to setup bootstrap 4 scss with react webpack

Question

i'm starting a new project using reactjs ES6 and webpack

using react-static-boilerplate starter question is how can i import bootstrap4 into the build proccess ?

i dont want to use the bootstrap.css generated file, instead i want webpack to build it for me so i can get to change its @variables and apply my theme etc.

i started project by cloning boilerplate

> git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install

2. installed bootstrap using npm

   npm install [email protected]

now if i required the main bootstrap file into my index.js it will load fine. but how can i include the sass files of bootsrap to start customizing it ?

Solution 1

First of all you need to download proper loader for scss

Install sass-loader

npm install sass-loader --save-dev

Then you need to configure your webpack to test all scss files so it can handle it. Here it is how it is done

{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

If you got error regarding node-sass

If you got error like cannot resolve node-sass then install

npm i node-sass --save-dev

Now if you import bootstrap.scss webpack will bundle it for you

import "bootstrap/scss/bootstrap.scss"

How to customize it

Example in your own scss file

$btn-font-weight:bold;

and then import the component you want to override or the whole bootstrap.scss

@import '~bootstrap/scss/bootstrap.scss';

In my case style.scss

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

main.js

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

Hope this help you to achieve your goal!

I have created a demo app here

run npm install and npm start got to localhost:8080

Solution 2

Seems like the boilerplate doesn't use sass-loader, and doesn't look for .scss files.

So first off install npm i sass-loader --save

Then under the loaders part in the webpack config you should add something like this:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};

Now, if you want to play around with bootstrap's .scss variables, you can do so like this:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

and in your main.js put in the style import

import "styles/app.scss";

Also, I should mention, this seems very close to this answer

Solution 3

Now that you're switched to react-slingshot with webpack already set up for sass there's a few less steps. From the raw boilerplate, add bootstrap 4 with npm as you already did:

npm install [email protected] --save

Then in src/styles/styles.scss you want to add a couple imports

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

This is essentially the same thing as @DanielDubovski is showing you but it's a little more conventional to have a separate file of bootstrap overrides, and you don't need default anymore since you're planning on overriding bootstraps defaults and you probably don't want to accidentally override your custom bootstrap colors. To get started with src/styles/bootstrap-custom.scss, you can go into node_modules/bootstrap/scss/_variables.scss and see a complete list of the default variables. You can then copy out the variable names that you want to update. Here's an example of the bootstrap-custom.scss that just overrides the greyscale colors:

/*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;

Solution 4

npm install --save-dev sass-loader css-loader style-loader node-sass

on your webpack.config.js:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]

View more solutions

Comments

[Michael Parker]

Just to clarify, are you asking how you can require the bootstrap SASS files in your React components instead of the CSS files?

[Zalaboza]

@MichaelParker yes and how to overwrite default bootstrap variables

[Ben Sidelinger]

That repo you cloned is using post css and doesn't seem to have sass-loader set up for webpack. If you want to use sass, it may be worth trying another boilerplate that is set up for sass instead of postcss. Otherwise you'll need to add the sass loader to this repo. Once you have a sass build working you want to have your own custom variables file that you import before bootstrap, with will override bootstrap default variables. I'll post a full answer once you've confirmed the sass vs postcss direction you want to go and if you intend to stick with this boilerplate.

[Zalaboza]

@BenSidelinger thanks yes i'm using sass now with github.com/coryhouse/react-slingshot, how can i import bootstrap sass files now thanks again.

[Ben Sidelinger]

Did you see my answer @Zalaboza? It's all ready to go for use with react-slingshot, I set it up locally and it ran well. The rest of the answers must have not seen your comment, because they're still focused on the sass-loader for webpack, which is already set up in react-slingshot.

[rinatoptimus]

Ben Sidelinger, how did you included Bootstrap 4 in Slingshot?

[Dejan Vasic]

By importing bootstrap in this way it would mean that you are disconnecting from the original bootstrap repo and won't get the latest changes come through u less you manually move them. I'd rather manually clone bootstrap repo, add your custom variables and produce the CSS ready for your project. It would be easier to move CSS instead of bootstrap source code

[Zalaboza]

@DejanVasic no you are not disconnecting, cause as u can see in the accepted answer you import bootstrap default then u overwrite it with yours.

[Dejan Vasic]

you referring to this? import "bootstrap/scss/bootstrap.scss"

[shining]

I don't know why you are importing style.scss in both main.js and style.scss file. I think importing on style.scss will work.

[Hianz]

It's no longer allowed to omit the '-loader' suffix when using loaders. This is the correct one now: { test: /\.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]}

[Marc Casavant]

What if you want to include only parts of the framework like the grid... is this possible?