Bootstrap4: Доступ к переменным?

Question

Я переключился с Bootstrap 3 на Bootstrap 4. Я использую источники sass, которые я компилирую на ходу. Когда я изменил библиотеки, я начал получать ошибку на свою медиа коммутаторы, т.е. для

@media screen and (min-width: $screen-md-min) { 
    padding: 40px 50px; 
} 

Я получаю ошибку Undefined переменной: «$ экрана-MD-мин».

Что такое правильный способ доступа к переменным Bootstrap4?

Thank u.

Answer 1

BS4 заменяет Less with Sass. Меньше использовать ленивую загрузку для переменных, в то время как Сасс не делает этого. Поэтому перед их использованием вы должны объявить свои переменные. Убедитесь в том, чтобы импортировать bootstrap/_variables.scss перед вашими медиа-переключателей:

@import 'bootstrap/variables'; 
@media screen and (min-width: $screen-md-min) { 
    padding: 40px 50px; 
} 

Answer 2

См the relevant section of the Bootstrap 4 migration documentation.

В @screen-* переменные были заменены переменной $grid-breakpoints вместе с media-breakpoint-up(), media-breakpoint-down() и media-breakpoint-only() помощник Sass Примеси.

Пример использования:

@include media-breakpoint-up(md) { 
    padding: 40px 50px; 
}