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 ?

Answer 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

Answer 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