React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]
Tags: react, bootstrap, sass, css
Published: 2017-08-26 23:21:47

---
title: React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]
published: true
description: How to add custom Bootstrap 4 Sass to create-react-app
tags: react, bootstrap, sass, css
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qtq9pey37ow6xejcctu5.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 nodejs`

- Yarn
```bash
$ 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
```bash
$ create-react-app bootstrap4-react-app
```

### Adding Sass (This part is from the `create-react-app` package [documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc))

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

```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:

![Before adding the variable](https://thepracticaldev.s3.amazonaws.com/i/gczt961p97lh0r44doyo.png "Before")

![After adding the variable](https://thepracticaldev.s3.amazonaws.com/i/mjqmk3bhqsit3dxz5001.png "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.