In React how to import only needed Bootstrap styles. Bootstrap css modules?

Question

I want to use bootstrap 4 in my React project. The built css file should have only styles of bootstrap classes that I included in my React components.

I am not searching for Bootstrap css classes as React components; I don't mind to write <div className='container'>

1. Reactstrap

I tried with reactstrap, and yes has bootstrap css classes as components (e.g <Container></Container>) but you have to includes all bootstrap styles:

In src/index.js:

import 'bootstrap/dist/css/bootstrap.css';

2. Scss source files

Because I already had sass-loader I tried importing directly the scss file:

import bootstrapGrid from 'bootstrap/scss/_grid.scss';
const myComponent = () => <div className={bootstrapGrid.container}>[...]</div>

But it fails as it doesn't have enough data to compile:

3. Oher solutions:

react-bootstrap I don't need js logic in react way (and it is v3)
styled-bootstrap still too new
bootstrap-css-modules seems good, but it is unmaintained

What is the right direction?

Or should I go for purifycss-webpack to clean up my App? And remove unused css classes.

You need to import Bootstrap's variables.

SLaks
– SLaks

2018-02-09 14:10:34 +00:00
Commented Feb 9, 2018 at 14:10 — SLaks
– SLaks, Commented Feb 9, 2018 at 14:10
Did you ever find a solution to this?

Hades
– Hades

2021-04-27 08:25:03 +00:00
Commented Apr 27, 2021 at 8:25 — Hades
– Hades, Commented Apr 27, 2021 at 8:25

Syden · Accepted Answer · 2018-02-23 18:06:33Z

3

You can do the following which should include all the necessary modules to compile just the grid:

import bootstrapGrid from 'bootstrap/scss/bootstrap-grid.scss';

Or, include variables first & all other modules that are needed to compile the grid:

import bootstrapFunctions from 'bootstrap/scss/_functions';
import bootstrapVariables from 'bootstrap/scss/_variables';
import bootstrapMixinBreakpoints from 'bootstrap/scss/mixins/_breakpoints';
import bootstrapMixinGridFramework from 'bootstrap/scss/mixins/_grid-framework';
import bootstrapMixinGrid from 'bootstrap/scss/mixins/_grid';
import bootstrapGrid from 'bootstrap/scss/_grid.scss';
import bootstrapUtilitiesDisplay from 'bootstrap/scss/utilities/_display';
import bootstrapUtilitiesFlex from 'bootstrap/scss/utilities/_flex';

You can check which modules are needed from the bootstrap-grid.scss file @imports:

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

edited Feb 23, 2018 at 18:06

answered Feb 9, 2018 at 14:23

Syden

8,6455 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mikel Over a year ago

With bootstrap/scss/bootstrap-grid.scss it works but then I am importing the whole grid. .container was just an example. Importing one by one it fails to compile Argument $color of darken($color, $amount) must be a color. It seems when importing variables, functions and mixins are not global.

Syden Over a year ago

Sorry for late reply Mikel, what do you mean by "whole grid"? it just includes all imports. The error you are getting is the lack of the $color variable definition which is used as argument.

Collectives™ on Stack Overflow

In React how to import only needed Bootstrap styles. Bootstrap css modules?

1. Reactstrap

2. Scss source files

3. Oher solutions:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1. Reactstrap

2. Scss source files

3. Oher solutions:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related