![Cover image for React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fqtq9pey37ow6xejcctu5.png)
I needed a way to customize Bootstrap 4 from the Sass files making easier to change the variable values.
Requirements
Node.js
$ sudo apt-get install nodejsYarn
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
- Install create-react-app package (you probably need to use
sudo)$ yarn global add create-react-app
Create your react app
$ create-react-app bootstrap4-react-app
Adding Sass (This part is from the create-react-app package documentation)
Create /src/styles/ folder
Inside your project folder execute $ mkdir src/styles
Install the command-line interface for Sass, the package to run tasks in parallel and Bootstrap 4.
$ yarn add node-sass-chokidar npm-run-all bootstrap
Add the new tasks in the package.json
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
As you can see if you look at your package.json this are the new commands:
build-css: Builds the css from the /src/styles/ directory.
watch-css: Whatches for changes of the .scss files from the /src/styles/ directory.
start-js: Executes the old start command.
start: Runs in parallel whatch-css and start-js.
build: Builds the css and build the scripts.
Create sass files
Now we can create index.scss and _custom_bootstrap.scss in our styles directory (that will create an index.css when it's build).
We use '_' for skipping this file to be build independently from the index file, instead we are going to import the file inside index.scss.
// My Bootstrap configuration
@import 'custom_bootstrap';
// Bootstrap library
@import 'bootstrap/scss/bootstrap';
// Here you can import more .scss files or write scss code.
...
Add custom variables
In `_custom_bootstrap.scss we can overwrite Bootstrap variablesthat we can find in ./node_modules/bootstrap/sass/_variables.scss.
For exemple we are going to change the primary theme color:
`scss
// New color
$new-color: #ad9a5b;
// Array of colors from _variables.scss
$theme-colors: (
primary: $new-color,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
) !default;
Since we don't have some variables you will have to copy them from the
The next step is loading the CSS file into index.js adding this line before the import off the App component: import './styles/index.css';
For starting the app just execute yarn start in your project folder and start changing variables, the terminal will tell you if your scss file has some errors and also every time you change something on the file will re-built the index.css and reload the page so you can see the changes,
This is the before and after:
This is my first article, so if you have some input or recomendation is always helpful.
Thanks and I hope this article is useful for you.
Top comments (15)
Is this the same for react-scripts@2.0.0? Only, the docs on create-react-app about this (here: facebook.github.io/create-react-ap...) are slightly simpler, but they're not really working for me...
I'm not sure whether to forge ahead with your solution, or whether I'm just doing something stupid...
Hi Nathan,
This post it's a year old, probably outdated haven't tried it with react-scripts 2.0 but I will look into it later and maybe do an article update.
Thanks for pointing it out.
Awesome! Thanks!
It turns out that the docs on create-react-app are working, but the docs on theming bootstrap 4 (here: getbootstrap.com/docs/4.1/getting-...) are not working :( My colours are being ignored. I'm almost certainly sure it's something I've done wrong. I'll eagerly await your update, and in the meantime keep stabbing in the dark :D
After following everything to the dot this is what I get when I do 'yarn start' ...
Mooses-High-Sierra:bootsass-react moose$ yarn start
yarn run v1.9.4
$ npm-run-all -p watch-css start-js
$ npm run build-css && node-sass-chokidar --include-path ./src/styles --include-path ./node_modules src/styles/ -o src/styles --watch --recursive
$ react-scripts start
module.js:549
throw err;
^
Error: Cannot find module 'semver'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (/usr/local/lib/node_modules/npm/lib/utils/unsupported.js:2:14)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with signal "SIGTERM".
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "watch-css" exited with 1.
error Command failed with exit code 1.
info Visit yarnpkg.com/en/docs/cli/run for documentation about this command.
Thanks for writing up this tutorial.. Do you know if the above is still valid with the latest version of bootstrap? I've been unable to get the build-css to compile. When I try adding the theme variables mentioned above to the _custom_bootstrap.scss file, I continue to get compile errors:
10:24:52 web.1 | {
10:24:52 web.1 | "status": 1,
10:24:52 web.1 | "file": "/Users/x/sites/aaa/client/src/styles/_custom_bootstrap.scss",
10:24:52 web.1 | "line": 7,
10:24:52 web.1 | "column": 14,
10:24:52 web.1 | "message": "Undefined variable: \"$gray-600\".",
10:24:52 web.1 | "formatted": "Error: Undefined variable: \"$gray-600\".\n on line 7 of src/styles/_custom_bootstrap.scss\n>> secondary: $gray-600,\n -------------\n"
10:24:52 web.1 | }
Any ideas? Thanks!
I think that the problem is that
$gray-600is not declared, you should create a new variable and change it or you can copy the grey scale from the boostrap _variables.scss file and paste the variables before$theme-colorsdeclarationHope it works!
This was so good... exactly what i needed...would love to see more in this series..
However, I tried to resolve the error, but couldnt find a solution nor could understand how to resolve this:
{
"status": 1,
"file": "/Users/omkarkulkarni/workspace/texthub/src/styles/index.scss",
"line": 2,
"column": 1,
"message": "File to import not found or unreadable: ./custom_bootstrap.\nParent style sheet: /Users/omkarkulkarni/workspace/texthub/src/styles/index.scss",
"formatted": "Error: File to import not found or unreadable: ./custom_bootstrap.\n Parent style sheet: /Users/omkarkulkarni/workspace/texthub/src/styles/index.scss\n on line 2 of src/styles/index.scss\n>> @import './custom_bootstrap';\n \n"
}
I am not sure what was wrong... but I changed the name from _custom_bootstrap to _variables and it worked... not sure whats the scene...
Because in the tutorial has the wrong filename on import: @import './custom_bootstrap'
It should be @import './_custom_bootstrap', so you fixed it by changing the filename and imported the correct file.
Dude you blog was a very help full for me. Rather than going into the node-modules i overwrited the colors by adding a new _variables.scss in the root css folder.
Here is my code:-
$color-primary: rgb(0, 86, 86);
$color-dark: rgb(0,0,0);
$color-info: rgb(0, 86, 86);
$theme-colors: (
primary: $color-primary,
info: $color-info,
dark: $color-dark
)
Don't change the varibles names or you will get a error
I think this is the only tutorial out there for this specific circumstance and it is exactly what I needed! Thank you!
Best tutorial for Bootstrap 4!
Thanks man! Glad was useful.
Hi, I follow the step and success to custom my bootsrap.
However in my component folder such as Header.js that it can't listen to Header.sass but Header.css work!!
So I npm run eject and add sass loader like this
And then I got error :
{
"status": 1,
"file": "/Users/alan2305/F2E/week2/filter-app/src/assets/index.scss",
"line": 2,
"column": 1,
"message": "File to import not found or unreadable: bootstrap/scss/_functions.scss.",
"formatted": "Error: File to import not found or unreadable: bootstrap/scss/_functions.scss.\n on
line 2 of src/assets/index.scss\n>> @import \"bootstrap/scss/_functions.scss\";\n\n \n"
}
It look like npm run eject cause my script crash in package.json !?
how can I resolve this problem thx!!
This tutorial is actually made for not ejecting if you run
ejectyou cannot updatecreate-react-appon that project to fix it I think you can follow this tutorial.The scripts are looking for
.scssfiles in/src/stylessince you change the folder name toassetsnow is checking in/src/assetsand what the script does is that if you don't add_at the biginning of the name will treat it as a new file so from aHeader.scssit will create aHeader.css(the.cssis the one file that you can use inside your component, because is a build css file).IMO you should create a
index.scssand then import every component style file (like_header.scss) after importing_custom boostrapandboostrapand then import in theApp.jstheindex.cssthat the script will generate on every change of any.scssfile in the/src/assetsfolder, but this is just a way to do it I understand that can be more clear to have it in every component folder.If needed I can take a look if you have a public repo.
Hope it helps.