如何在引导反应/redux 应用程序中覆盖引导主题颜色？

Posted 2023-03-06

【中文标题】如何在引导反应/redux 应用程序中覆盖引导主题颜色？

【英文标题】：How to override Bootstrap theme colors in bootstrapped react/redux app?

【发布时间】：2019-01-26 11:08:10

【问题描述】：

可能是一个新手问题（从 REACT 开始），但我无法在我新启动的 react 应用程序中更改主题颜色。

我阅读了一些答案，但不幸的是，它们对我不起作用。

我有以下入口点：

import React from 'react';
import ReactDOM from 'react-dom';
import  App  from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './styles/app.scss';

ReactDOM.render(<App />, document.getElementById('app'));

我在src/styles 中有app.scss 样式表：

@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';

我尝试在此处更改主题颜色，但似乎没有任何作用：

@import "node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
  "primary": #991196,
  "danger": #ff4136
);

有人可以向我指出这是如何工作的，因为我遇到的所有答案和教程似乎都在使用不同的方法。

我正在使用以下版本的 Bootstrap：

"bootstrap": "^4.0.0"

【参考方案1】：

首先参考这个，Bootstrap webpack

这是在 reactjs 项目中使用引导程序的一种方式。

您正在通过这样做导入引导 css 的编译版本

import 'bootstrap/dist/css/bootstrap.min.css'; //Dont do this

你应该这样做

在您的 app.scss 文件中，

首先定义你的颜色

$primary: #13C7CD;
$danger: #red;

然后

导入scss版本的bootstrap

@import '~bootstrap/scss/bootstrap';

---

~ 表示 webpack 将在 node_modules 中搜索它

在此之后将 app.scss 文件导入您的主 js 文件（可以是 index.js 或 app.js）

import './styles/app.scss';

这是如何工作的

在导入 bootstrap scss 之前定义颜色变量时， 生成的编译 css 将具有您的颜色值

【讨论】：

感谢您的解释。我的错误是在重新定义颜色之前导入 Bootstrap。但是你的解释很有道理，所以我会这样使用它。

【参考方案2】：

您可以完全在 app.scss 文件中进行覆盖和导入 Bootstrap。在主题颜色更改以覆盖 bootstrap _variables.scss 中定义的 !default 主题颜色之后， 导入 Bootstrap 很重要。

    @import '_settings.scss';
    @import '_base.scss';
    @import './components/_header.scss';

    /* import only the Bootstrap files needed for customizations */
    @import "node_modules/bootstrap/scss/functions";
    @import "node_modules/bootstrap/scss/variables";

    /* make the customizations */
    $theme-colors: (
      "primary": #991196,
      "danger": #ff4136
    );

    /* import bootstrap to set changes */
    @import "node_modules/bootstrap/scss";

构建 react 应用并编译 SASS 后，生成的 CSS 将包含您的自定义项和 Bootstrap，因此您无需在 react 中单独导入 bootstrap。

演示：https://www.codeply.com/go/Tho2TEwoI1

【参考方案3】：

最简单的方法...

只需在 BOOTSTRAP 样式之前导入/定义您的样式。而已！ '快乐的黑客'