7

I'm using facebook's create-react-app. I've completed all the instructions to add SASS to my app, now I'm trying to add Bootstrap and customize the theme. I've been able to add bootstrap but the customizing of the variables is not working. Here is my setup:

package.json

"bootstrap": "^4.0.0-beta",

In my React layout container:

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/custom_bootstrap.scss';

Bootstrap is working fine but the customizations/overrides are not having an effect.

custom_bootstrap.scss:

$theme-colors: (
  primary: orange
) !default;

The primary is still blue. What am I doing wrong here?

Updated

MainLayout.jsx

import '../styles/index.css'

index.scss

@import 'custom_bootstrap';
@import 'bootstrap/scss/bootstrap';

If I remove @import 'custom_bootstrap'; bootstrap compiles successfully.

If I add it back and update the following:

_custom_bootstrap.scss

$theme-colors: (
  primary: orange
) !default;

I'm getting compile errors like so:

09:44:56 web.1  | => changed: /Users/xxx/sites/xxx/client/src/styles/index.scss
09:44:56 web.1  | {
09:44:56 web.1  |   "status": 1,
09:44:56 web.1  |   "file": "/Users/xxx/sites/xxx/client/node_modules/bootstrap/scss/_forms.scss",
09:44:56 web.1  |   "line": 280,
09:44:56 web.1  |   "column": 21,
09:44:56 web.1  |   "message": "argument `$color` of `rgba($color, $alpha)` must be a color\n\nBacktrace:\n\tnode_modules/bootstrap/scss/_forms.scss:280, in function `rgba`\n\tnode_modules/bootstrap/scss/_forms.scss:280",
09:44:56 web.1  |   "formatted": "Error: argument `$color` of `rgba($color, $alpha)` must be a color\n\n       Backtrace:\n       \tnode_modules/bootstrap/scss/_forms.scss:280, in function `rgba`\n       \tnode_modules/bootstrap/scss/_forms.scss:280\n        on line 280 of node_modules/bootstrap/scss/_forms.scss\n>>   background-color: rgba($form-feedback-invalid-color,.8);\n   --------------------^\n"
09:44:56 web.1  | }
halfer
  • 19,824
  • 17
  • 99
  • 186
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012

2 Answers2

6

It looks like you're importing the compiled bootstrap CSS:

import 'bootstrap/dist/css/bootstrap.css';

Variables you set in your custom SCSS won't have any effect on this.

Import your variables, then bootstrap's SCSS. Omit the !default flag. Example:

styles/styles.scss

@import 'variables';
@import '[relative path to boostrap]/scss/bootstrap';

styles/_variables.scss

$theme-colors: (
    primary: orange
);
pixleight
  • 188
  • 7
2

You cannot change sass variables that are in the compiled .css bootstrap file. They are no longer sass variables at that point. You need to override them before they are compiled. So start by importing in bootstrap to your custom file and then override it. Then you can compile it all into one .css file.

import 'bootstrap/dist/css/bootstrap.scss';

$theme-colors: (
  primary: orange
) !default;
Eric G
  • 2,577
  • 1
  • 14
  • 21
  • thanks Eric, I think we are getting close but the above is giving a new error, see UPDATE in question above. thank you! – AnApprentice Oct 12 '17 at 16:46
  • You should be importing your custom file after the bootstrap file. That could be related. You want your custom styles to override the bootstrap defaults. – Eric G Oct 12 '17 at 16:52
  • if I move the custom file after bootstrap it does compile but no changes are made... the customizations do not take effect – AnApprentice Oct 12 '17 at 16:54
  • So that is the correct order, there must be a problem with your custom styles. What bootstrap file does this `$theme-color` variable live in? I can't find it in there source sass. – Eric G Oct 12 '17 at 16:55
  • it lives within _variables.scss – AnApprentice Oct 12 '17 at 16:55
  • interestingly, if I just add `$btn-font-weight:bold;` to index.scss it works fine and the effect happens... maybe it has something to do with $theme-colors – AnApprentice Oct 12 '17 at 16:56
  • I'm looking through the 4 alpha code so maybe yours is different. Yes, edits in your index would also do the trick. – Eric G Oct 12 '17 at 16:57
  • well if I try adding $theme-colors directly in the index.scss it still errors. – AnApprentice Oct 12 '17 at 16:58
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156582/discussion-between-eric-g-and-anapprentice). – Eric G Oct 12 '17 at 16:58