Пользовательский стиль с scss для реакции-начальной загрузки - PullRequest
Новая
       20

Пользовательский стиль с scss для реакции-начальной загрузки

0 голосов
/ 05 ноября 2019

Я создаю приложение React с использованием response-bootstrap. Я хочу настроить компоненты реакции-начальной загрузки, как мне этого добиться?

Я прошел краткое руководство на странице создания приложения реакции и смог переопределить переменные по умолчанию, такие как первичная, вторичная и т. Д. Я импортировал bootstrap.scss конец файла. 

className = "btn-primary btn-sm"

<Button variant="primary" size="sm">
        Primary
 </Button>

.btn-primary {
  background-color: $primary;
  width: 40px;


  &:hover {
    background-color: var(--color-white);
    border: var(--btn-primary-border);

    span {
      color: $primary;
    }
  }

@import "~bootstrap/scss/bootstrap.scss";

Я ожидал, что мои вышеперечисленные стили будут применены, но они не применяются. Применяется только цвет фона.

Если кто-то все еще ищет ответ, это то, что я сделал, и это работает для меня. 

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "your custom.css" here

Это переопределит стили начальной загрузки

Ответы [ 2 ]

0 голосов
/ 05 ноября 2019

Это сводится к следующим шагам:

  1. Загрузка начальной загрузки с использованием npm install react-bootstrap
  2. Установка препроцессора SASS (https://sass -lang.com /install )
  3. Создать файл scss для переопределения начальной загрузки _variables.scss (убедитесь, что путь к _functions.scss, _variables.scss, _mixins.scss и bootstrap.scss указан правильно) 

/* stylesheet.scss */

@import "bootstrap/scss/functions"; 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

/* Your customizations here */

$theme-colors: (
  primary: red;
);

@import "bootstrap";
Перенесите ваш stylesheet.scss в stylesheet.css и добавьте ссылку на свою главу, например: <link rel="stylesheet" href="stylesheet.css">

Вот несколько ссылок, которые должны помочь вам начать работу:

  1. Как настроить бутстрап
  2. Тематическая бутстрап
0 голосов
/ 05 ноября 2019

Для переопределения переменных начальной загрузки: 

// Override Bootstrap Variables.
// For example: $grid-gutter-width-base:  20px;
// For example: $grid-gutter-width: 20px;

@import "bootstrap-overrides";

//Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

Для пользовательского оформления в компоненте: вам нужно будет импортировать начальную загрузку в начале файла 

// Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

и после этого выможно применить ваш стиль.

...