Bootstrap4: Zugriff auf Variablen?

Question

Ich wechselte von Bootstrap 3 zu Bootstrap 4. Ich benutze Sass-Quellen, die ich im Lauf kompiliere. Wenn ich die Bibliotheken geändert, begann ich Fehler auf meinen Medien Schalter zu erhalten, das heißt für

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

I Fehler undefinierte Variable erhalten: "$ screen-md-min".

Was ist eine korrekte Möglichkeit, auf Variablen von Bootstrap4 zuzugreifen?

Vielen Dank.

Answer 1

BS4 ersetzt Less durch Sass. Weniger verwenden Sie Lazy Loading für Variablen, während Sass nicht. Sie sollten also Ihre Variablen vor der Verwendung deklarieren. Stellen Sie sicher, bootstrap/_variables.scss vor Ihrer Medien Schalter importieren:

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

Answer 2

Siehe the relevant section of the Bootstrap 4 migration documentation.

Die @screen-* Variablen wurden durch die $grid-breakpoints Variable zusammen mit dem media-breakpoint-up(), media-breakpoint-down() und media-breakpoint-only() Helfer Sass Mixins ersetzt.

Beispiel Nutzung:

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