Dídac

Posted on Aug 26, 2017 • Updated on Oct 11, 2019

React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

#react #bootstrap #sass #css

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.

Top comments (15)

Nathan Trevivian • Jan 28 '19

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 • Jan 28 '19

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 • Jan 28 '19

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 • Aug 12 '18

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 • Oct 12 '17

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 • Oct 12 '17 • Edited

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 • Feb 18 '18 • Edited

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 • Feb 18 '18

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 🎮🏆 • Mar 28 '18

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 • Feb 2 '20

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 • Feb 6 '18

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

Ivan Wang • Nov 24 '17

Best tutorial for Bootstrap 4!

Dídac • Nov 24 '17

Thanks man! Glad was useful.

Alan Chao • Jun 17 '18

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 • Jun 19 '18 • Edited

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.

DEV Community

React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

Requirements

Create your react app

Adding Sass (This part is from the `create-react-app` package documentation)

Create `/src/styles/` folder

Install the command-line interface for Sass, the package to run tasks in parallel and Bootstrap 4.

Add the new tasks in the `package.json`

Create sass files

Add custom variables

Top comments (15)

Read next

React Monorepo Setup Tutorial with pnpm and Vite: React project + UI, Utils

Things that I like better in Vue than in React

Free online planning poker

React Native Login connect with sql server ?

Requirements

Create your react app

Adding Sass (This part is from the create-react-app package documentation)

Create /src/styles/ folder

Install the command-line interface for Sass, the package to run tasks in parallel and Bootstrap 4.

Add the new tasks in the package.json

Create sass files

Add custom variables

Read next

React Monorepo Setup Tutorial with pnpm and Vite: React project + UI, Utils

Things that I like better in Vue than in React

Free online planning poker

React Native Login connect with sql server ?

Adding Sass (This part is from the `create-react-app` package documentation)

Create `/src/styles/` folder

Add the new tasks in the `package.json`