DEV Community

Cover image for React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

React + Custom Bootstrap 4 Sass [PROBABLY DEPRECATED]

Dídac on August 26, 2017

I needed a way to customize Bootstrap 4 from the Sass files making easier to change the variable values. Requirements Node.js $ sudo a...
Read full post
Collapse
 
ndtreviv profile image
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...

Collapse
 
sabatesduran profile image
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.

Collapse
 
ndtreviv profile image
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

Collapse
 
htmlfivedev profile image
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.

Collapse
 
bretthellman profile image
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!

Collapse
 
sabatesduran profile image
Dídac • • 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!

Collapse
 
ovk23 profile image
Omkar Kulkarni • • 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"
}

Collapse
 
ovk23 profile image
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...

Collapse
 
duncan_lewis profile image
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.

Collapse
 
biomathcode profile image
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

Collapse
 
remulos profile image
Liam Simpson •

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

Collapse
 
ivawzh profile image
Ivan Wang •

Best tutorial for Bootstrap 4!

Collapse
 
sabatesduran profile image
Dídac •

Thanks man! Glad was useful.

Collapse
 
chaotzujung profile image
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!!

Collapse
 
sabatesduran profile image
Dídac • • 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.