probably a newbie questions (starting with REACT) but I am unable to change the theme colors in my newly bootstrapped react application.
I read some answers but unfortunately, they did not work for me.
I have the following entry point:
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './styles/app.scss';
ReactDOM.render(<App />, document.getElementById('app'));
and I have app.scss
style sheet in src/styles
:
@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';
I tried changing the theme colors here but it doesn't seem to do anything:
@import "node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
"primary": #991196,
"danger": #ff4136
);
Could someone point out to me how this works since all the answers and tuturials I came across seem to be using different approaches.
I am using the following version of Bootstrap:
"bootstrap": "^4.0.0"
To customize Bootstrap, create a file called src/custom. scss (or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables.
You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
You are importing compiled version of bootstrap css by doing this
import 'bootstrap/dist/css/bootstrap.min.css'; //Dont do this
Instead you should do this
In your app.scss file,
first define your color
$primary: #13C7CD;
$danger: #red;
then
import scss version of bootstrap
@import '~bootstrap/scss/bootstrap';
~
means webpack will search for it in node_modules
After this import the app.scss file in your main js file(can be index.js or app.js)
import './styles/app.scss';
How this works
When you define your color variables before importing bootstrap scss, the resulting complied css will have your color values
You can make the overrides and import Bootstrap entirely in the app.scss
file. It's important the Bootstrap is imported after the theme color changes to override the !default theme-colors defined in bootstrap _variables.scss.
@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';
/* import only the Bootstrap files needed for customizations */
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
/* make the customizations */
$theme-colors: (
"primary": #991196,
"danger": #ff4136
);
/* import bootstrap to set changes */
@import "node_modules/bootstrap/scss";
When the react app is built and the SASS is compiled then generated CSS will contain your customizations and Bootstrap so that you won't need to separately import bootstrap in react.
Demo: https://www.codeply.com/go/Tho2TEwoI1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With