CODEWITHSUNDEEP
cssreactjssassreact-bootstrap
Ali Bdeir
Ali Bdeir

Reputation: 4365

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

Upvotes: 2

Views: 1073

Answers (2)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

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

Upvotes: 2

crg
crg

Reputation: 4557

You cannot use variables like $theme-colors inside a css file

You named your file _custom.css try to rename it for _custom.scss

Upvotes: 0

Related Questions