如何在自举的React/Redux应用程序中覆盖Bootstrap主题颜色? [英] How to override Bootstrap theme colors in bootstrapped react/redux app?

问题描述

可能是一个新手问题(以REACT开头)，但是我无法在新启动的react应用程序中更改主题颜色.

probably a newbie questions (starting with REACT) but I am unable to change the theme colors in my newly bootstrapped react application.

我读了一些答案，但不幸的是，它们对我没有用.

I read some answers but unfortunately, they did not work for me.

我有以下入口点:

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';

我尝试在此处更改主题颜色，但似乎无济于事:

I tried changing the theme colors here but it doesn't seem to do anything:

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

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

由于我遇到的所有答案和习俗似乎都在使用不同的方法，因此有人可以向我指出这是如何工作的.

Could someone point out to me how this works since all the answers and tuturials I came across seem to be using different approaches.

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

I am using the following version of Bootstrap:

"bootstrap": "^4.0.0"

推荐答案

首先请参考 Bootstrap Webpack

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

This is one way of using bootstrap in reactjs projects.

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

You are importing compiled version of bootstrap css by doing this

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

相反，您应该这样做

在您的 app.scss 文件中，

首先定义您的颜色

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

然后

导入引导的scss版本

import scss version of bootstrap

@import '~bootstrap/scss/bootstrap';

---

〜表示webpack将在 node_modules

---

~ means webpack will search for it in node_modules

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

After this import the app.scss file in your main js file(can be index.js or app.js)

import './styles/app.scss';

这是如何工作的

在导入引导脚本之前定义颜色变量时，生成的符合要求的CSS将具有您的颜色值

When you define your color variables before importing bootstrap scss, the resulting complied css will have your color values

这篇关于如何在自举的React/Redux应用程序中覆盖Bootstrap主题颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！