How to customize bootstrap 4 in reactjs app with reactstrap dependency?

问题

I start developing a React app with reactstrap. I followed the Get Started running the following commands :

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

npm install bootstrap --save
npm install --save reactstrap@next react react-dom

Then I can see "bootstrap": "^4.0.0" in package.json's dependencies and bootstrap/ in my project node_modules folder. Well.

Now I would like to change, for instance, the boostrap primary color. Let's start easy :). I have read Bootstrap 4 Theming but I don't find any custom.scss in my project.

What is the proper way to add and edit bootstrap theme when using reactstrap ? Plus, how do I keep my changes across bootstrap updates since /node_modules is in .gitignore ?

PS: I am new to web / react development so my apologies if I ask/say anything stupid or obvious.

Thanks

回答1:

Instructions here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

Install Sass: npm install node-sass --save
Install reactstrap. First bootstrap: npm install bootstrap --save. Then reactstrap: npm install --save reactstrap react react-dom
create your custom bootstrap theme file src/styles/custom-btsp.scss and edit as wanted (see theming v4).
add import './styles/css/custom.scss'; in src/index.js

Done!

Here is an exemple of my custom-btsp.scss file:

$theme-colors: (
  "primary": #ffb800
);

$btn-border-radius: 3000px;

@import "~bootstrap/scss/bootstrap";

回答2:

You should create SCSS file in your project structure. Include defal=ult bootstrap styles using scss import

@import "node_modules/bootstrap/scss/bootstrap";

and after that reassign styles.

But first thing you should to do is adjust your webpack to understand .scss file extensions

来源：https://stackoverflow.com/questions/48523371/how-to-customize-bootstrap-4-in-reactjs-app-with-reactstrap-dependency

标签

node.js

reactjs

reactstrap