Как переопределить Bootstraps "btn-primary" активный фоновый цвет, используя SASS?

Question

Я использую загрузчик 4 с SCSS и у меня проблемы с поиском переменной, которая отвечает за фон активного элемента "btn-primary".

Конечно, я мог бы просто переопределить файл cssкак после процесса компиляции.

.btn-primary:not(:disabled):not(.disabled):active{
  background-color:red;
}

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

Пожалуйста, посмотрите это jsfiddle и нажмите кнопку теста, чтобы понять, что я имею в виду.

Решено: Цвет сохраняется в $ primary (спасибо ReSedano)

Просто сделайте

$primary: #ff00ff;

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

Answer 1

Здесь вы можете понять Как переопределить boostrap4 с помощью scss : Как расширить / изменить (настроить) Bootstrap 4 с помощью SASS .

В вашем случае вам необходимо переопределить карту $theme-colors:

$theme-colors: (
  "primary": #ff0000 // <= put here your color
);

Чтобы понять "как при начальной загрузке генерируется этот конкретный цвет?" в _buttons.scssВ файле вы можете найти функцию:

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

Чтобы изменить цвета, Bootstrap зацикливает вызов карты $theme-colors, который вы найдете в _variable.scss файле.

$theme-colors: () !default;

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

Answer 2

это простая ошибка.bootstrasp.css после style.css, если да, можете ли вы переместить bootstrap.css до style.css

как

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" href="css/style.css">

использовать css в style.css

.btn-primary:not(:disabled):not(.disabled) {
background: red;
}

Answer 3

Цвета темы определены в _variables.scss

Кнопки создаются в _buttons.scss и используют button-option () mixin

// _variables.scss
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// _buttons.scss
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

Answer 4

Если вы перейдете к https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css, который является CDN для начальной загрузки, вы увидите уменьшенную версию библиотеки начальной загрузки.Каждый раз, когда вы используете его как cdn или как загруженный файл, вы используете правила css для объявленных классов из этого источника.Не стесняйтесь контролировать + f и искать .btn-primary:not(:disabled):not(.disabled):active, чтобы увидеть правила для этого класса.

Также вы правы.То, как ты это сделал, немного глупо.Что вы должны сделать, это поместить новый класс в элемент, для которого вы хотите переопределить правила начальной загрузки, а затем в CSS или Scss использовать его следующим образом:

.btn-primary.mycustombuttonclass {
    background: white; //for example
}