React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

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 nodejs

• Yarn
  

$ 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_variables.scss`.

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.

Comments

[Nathan Trevivian]

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...

[Dídac]

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.

[Nathan Trevivian]

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

[HTMLFiveDEV.com]

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.

[Brett Hellman]

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!

[Dídac]

I think that the problem is that $gray-600 is 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-colors declaration

Hope it works!

[Omkar Kulkarni]

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"
}

[Omkar Kulkarni]

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...

[Duncan Lewis 🎮🏆]

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.

[Pratik sharma]

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

[Liam Simpson]

I think this is the only tutorial out there for this specific circumstance and it is exactly what I needed! Thank you!

[Ivan Wang]

Best tutorial for Bootstrap 4!

[Dídac]

Thanks man! Glad was useful.

[Alan Chao]

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

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader!sass-loader",
        })
      },

And then I got error :

node-sass-chokidar --include-path ./src/assets --include-path ./node_modules src/assets/ -o src/assets/

{
"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!!

[Dídac]

This tutorial is actually made for not ejecting if you run eject you cannot update create-react-app on that project to fix it I think you can follow this tutorial.

The scripts are looking for .scss files in /src/styles since you change the folder name to assets now is checking in /src/assets and 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 a Header.scss it will create a Header.css (the .css is the one file that you can use inside your component, because is a build css file).

IMO you should create a index.scss and then import every component style file (like _header.scss) after importing _custom boostrap and boostrap and then import in the App.js the index.css that the script will generate on every change of any .scss file in the /src/assets folder, 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.