react-bootstrap SCSS 主题 orerride 不工作

Question

Index.tsx:

import './index.scss';

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>

然而，原色没有改变：

Answer 1

您可以在此处尝试使用此方法；

在本地bootstrap加载Scss，查看实时项目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

Answer 2

您不能在 css 文件中使用像 $theme-colors 这样的变量

您将文件命名为 _custom.css 尝试将其重命名为 _custom.scss

react-bootstrap SCSS 主题 orerride 不工作

react-bootstrap SCSS theme orerride not working

css

sass

reactjs

react-bootstrap