how to setup bootstrap 4 scss with react webpack

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

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;

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