Как расширить bootstrap собственными стилями? - PullRequest
Новая
       18

Как расширить bootstrap собственными стилями?

0 голосов
/ 16 июня 2020

Я установил bootstrap 4.5 в RAILS 6 и хочу расширить некоторые стили.

Для этого у меня есть файл с именем banana.s css в app / assets / stylesheets, который выглядит следующим образом: 

.form-read-only {
 @extend .form-control, .form-control-sm;
 background-color: rgb(233, 236, 239)
}

Теперь я хочу встроить эту таблицу стилей после bootstrap загружен, поэтому я изменил app / assets / stylesheets / application. css на 

/*
 ...
 *= require banana
 *= require_tree .
 *= require_self
*/

@import 'bootstrap';
@import 'banana';

Но это приводит к сообщению об ошибке в браузере: 

Error: The target selector was not found.
       Use "@extend .form-control-sm !optional" to avoid this error.
        on line 5 of app/assets/stylesheets/banana.scss
>>   @extend .form-control, .form-control-sm;

Но каков способ расширения bootstrap?

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Думаю, проблема только в том, что вы *= require banana раньше @import 'bootstrap'. Попробуйте удалить первый: 

/*
 ...
 *= require_tree .
 *= require_self
*/

@import 'bootstrap';
@import 'banana';
0 голосов
/ 17 июня 2020

Я нашел простой способ добиться sh этого.

Просто импортируйте bootstrap в начало моей пользовательской таблицы стилей: 

@import 'bootstrap';

.form-read-only {
  @extend .form-control, .form-control-sm;
  background-color: rgb(233, 236, 239)
}

Потому что я могу ' t определить порядок, в котором загружаются файлы таблиц стилей, здесь я уверен, что при загрузке настраиваемой таблицы стилей сначала загружаются зависимые таблицы стилей bootstrap.

...