Search code examples
cssreactjssassreact-bootstrap

react-bootstrap SCSS theme orerride not working

Index.tsx:

import './index.scss';

Top of index.scss:

@import './scss/main.scss';

main.scss

@import './custom';

_custom.scss

@import "node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
  "primary": #ff0000,
  "danger": #ff4136
);

Login.tsx

<div className="card">
    <div className="card-body">
        <h5 className="card-title">Login</h5>
        <h6 className="card-subtitle mb-2 text-muted">Log in</h6>
        <Form>
            <Form.Group controlId="formBasicEmail">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" placeholder="Enter email" />
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" placeholder="Password" />
            </Form.Group>
            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    </div>
</div>

Yet, the primary color hasn't changed:

image

Solution

  • you can try it using this approach here;

    in local bootstrap load Scss, see live project Codesandbox typescript react

    @import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "bootstrap-overrides" /*your overwrite variables/files*/
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
.
.
. // rest of file/function