如何在自举的React/Redux应用程序中覆盖自举主题颜色？

可能是一个新手问题（以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(, document.getElementById('app'));

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

@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"

Gautam Naik.. 7

首先参考这个，Bootstrap Webpack

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

您正在通过此操作导入Bootstrap CSS的编译版本

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

相反，您应该这样做

在您的app.scss文件中，

首先定义你的颜色

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

然后

导入引导的scss版本

@import '~bootstrap/scss/bootstrap';

~ 意味着webpack将在其中搜索 node_modules

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

import './styles/app.scss';

如何运作

在导入引导scss之前定义颜色变量时，生成的符合标准的css将具有您的颜色值

首先参考这个，Bootstrap Webpack

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

您正在通过此操作导入Bootstrap CSS的编译版本

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

相反，您应该这样做

在您的app.scss文件中，

首先定义你的颜色

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

然后

导入引导的scss版本

@import '~bootstrap/scss/bootstrap';

~ 意味着webpack将在其中搜索 node_modules

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

import './styles/app.scss';

如何运作

在导入引导scss之前定义颜色变量时，生成的符合标准的css将具有您的颜色值