24

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

  1. installed bootstrap using npm

    npm install bootstrap@4.0.0-alpha.3

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 ?

Zalaboza
  • 8,899
  • 16
  • 77
  • 142
  • Just to clarify, are you asking how you can require the bootstrap SASS files in your React components instead of the CSS files? – Michael Parker Aug 31 '16 at 19:02
  • @MichaelParker yes and how to overwrite default bootstrap variables – Zalaboza Sep 01 '16 at 02:10
  • 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. – Ben Sidelinger Sep 01 '16 at 02:27
  • @BenSidelinger thanks yes i'm using sass now with https://github.com/coryhouse/react-slingshot, how can i import bootstrap sass files now thanks again. – Zalaboza Sep 01 '16 at 06:51
  • 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. – Ben Sidelinger Sep 02 '16 at 19:42
  • Ben Sidelinger, how did you included Bootstrap 4 in Slingshot? – rinatoptimus Nov 09 '16 at 21:14
  • 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 – Dejan Vasic Aug 18 '17 at 03:01
  • @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. – Zalaboza Aug 18 '17 at 03:09
  • you referring to this? ```import "bootstrap/scss/bootstrap.scss"``` – Dejan Vasic Aug 18 '17 at 05:43

5 Answers5

31

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

Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
  • 1
    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. – shining Jun 30 '17 at 04:36
  • 2
    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' ]}` – Hianz Jul 18 '17 at 15:23
  • What if you want to include only parts of the framework like the grid... is this possible? – Marc Casavant Apr 08 '18 at 22:57
10

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

Community
  • 1
  • 1
Daniel Dror
  • 2,304
  • 28
  • 30
10

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 bootstrap@4.0.0-alpha.3 --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;
Ben Sidelinger
  • 1,309
  • 7
  • 12
1
npm install --save-dev sass-loader css-loader style-loader node-sass

on your webpack.config.js:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]
JFAP
  • 3,617
  • 1
  • 24
  • 25
0

Not the OP's original framework (but that was a few years back). As of react-scripts@2.0.0 it now has built in SCSS compiling. So if you're using that for any new projects, it's simple enough to import: https://facebook.github.io/create-react-app/docs/adding-bootstrap

martinedwards
  • 5,577
  • 1
  • 33
  • 35