Рельсы 6 Начальная загрузка 5 (установка веб-пакета/пряжи) — как/где переопределить «основной» цвет начальной загрузки

#ruby-on-rails #webpack #bootstrap-5

Вопрос:

В новом проекте Rails 6 мы успешно установили Bootstrap 5 с помощью yarn add

В старые/более простые времена Rails и начальной загрузки у нас был bootstrap_overrides.scss для переопределения цветов.

В рельсах 6 и начальной загрузке 5, где можно переопределить цвета?

Я думал, что переопределение «основных» цветов $theme может быть сделано прямо под @import "~bootstrap/scss/bootstrap"; инструкцией в app/javascript/packs.application.scss, но, похоже, это не приводит к перекомпиляции цвета (даже после остановки/перезапуска локального сервера разработки)

 # app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>


# new app/javascript/packs.application.scss:
@import "~bootstrap/scss/bootstrap";

// NOT here, apparently...

$theme-colors: (
  "primary": indigo
);
 

Ответ №1:

начальная загрузка имеет значение по умолчанию! установите флажок на переменных, поэтому вам нужно переопределить эти переменные, прежде чем импортировать загрузочную загрузку примерно так:

 // in custom.scss
$theme-colors: (
  "primary": indigo
);

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

Затем импортируйте файл custom.scss в свой шаблон.

Комментарии:

1. Конечно! Спасибо! Я неправильно мыслил в терминах таблицы стилей, где вы ставите styleB после styleA, чтобы переопределить ее.