Как переопределить цвета темы Bootstrap в загружаемом приложении React / Redux?

возможно, вопросы новичка (начиная с 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'));

и у меня есть таблица стилей 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"

css reactjs sass bootstrap-4

20.08.2018 12:24

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

9 310

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Сначала обратитесь к этому, Загрузочный веб-пакет

Это один из способов использования начальной загрузки в проектах reactjs.

Вы импортируете скомпилированную версию bootstrap css, выполнив это

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

Вместо этого вы должны сделать это

В вашем файле app.scss,

сначала определите свой цвет

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

потом

импортировать scss-версию начальной загрузки

@import '~bootstrap/scss/bootstrap';

~ означает, что веб-пакет будет искать его в node_modules.

После этого импортируйте файл app.scss в ваш основной файл js (может быть index.js или app.js)

import './styles/app.scss';

Как это работает

Когда вы определяете свои цветовые переменные перед импортом начальной загрузки scss, в результате выполненный css будет иметь ваши значения цвета

Спасибо за объяснение. Моя ошибка заключалась в импорте Bootstrap до переопределения цветов. Но ваше объяснение имеет смысл, поэтому я буду использовать его таким образом.

— 20.08.2018 13:12

20.08.2018 12:48

Вы можете сделать переопределения и полностью импортировать Bootstrap в файл app.scss. Важно, чтобы Bootstrap был импортирован после, цвет темы изменился, чтобы переопределить цвета темы по умолчанию, определенные в bootstrap _variables.scss.

    @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, так что вам не нужно будет отдельно импортировать bootstrap в react.

Демо: https://www.codeply.com/go/Tho2TEwoI1

20.08.2018 13:08

Самый простой способ ...