Bootstrap mittels SASS nutzen

[Fugel]

Hallo Leute,

ich möchte bei einem neuen Projekt Bootstrap gern mal mittels reinem SASS nutzen. Bisher hab ich immer die fertige CSS genommen und nur meinen eigenen Code in SASS geschrieben. Ich hab eine Ordnerstruktur genommen, wie sie auf der Bootstrap-Seite beschrieben ist, nur nennt sich die custom.scss bei mir app.scss. Mein Scout (SCSS Compiler) zeigt mir keine Fehler und die Seite wird auch mit den Bootstrap Styles dargestellt. Ich hab mir wie beschrieben die _variables.scss rauskopiert und als neue _customVariables.scss eingebunden (diese wird auch erkannt). Wenn ich jetzt aber in dieser Datei z.B.

$h1-font-size:  $font-size-base * 2.5 !default;

in

$h1-font-size:  $font-size-base * 4.5 !default;

ändere, dann pasiert nichts. wenn ich es aber in der Originalen _variables.scss ändere, wird es wie gewollt ausgeführt. Was mach ich da falsch?

Edit:
In meiner app.scss steht folgendes:

@import "../bootstrap/scss/bootstrap";
@import "customVariables";

 

[Fugel]

Fehler nun doch noch gefunden, die app.scss muss so aussehen:

@import "../bootstrap/scss/functions";
@import "customVariables";
@import "../bootstrap/scss/bootstrap";

Falls das nicht die korrekte methode ist, bitte ich um Aufklärung

 

[Myhar]

Wenn es bei dir so funktioniert dann ist es doch fein.
Ein Denkanstoß meinerseits warum es eventuell vorhin nicht funktioniert hat: Du veränderst dort ja keine Variabel direkt sondern nur den Faktor einer Multiplikation (und damit das Ergebnis für eine Variablengröße)
Kann es sein, dass zu dem Zeitpunkt font-size-base noch gar nicht definiert war? Hmm obwohl, jetzt, wo ich das schreibe: Du hast ja die komplette Datei kopiert, da sollte doch alles definiert werden.
!default brauchst du doch nicht extra dazuschreiben bei deinen Variablen, das heißt doch nur: Nimm diesen Wert, sofern er nicht woanders definiert wird. Du möchtest aber, dass er deine Werte immer nimmt.
Ich habe bei mir erst letzte Woche testweise so ein bootstrap-sass Projekt so aufgesetzt wie du es möchtest und da hat das mit "customVariables" so wie du das beschrieben hast eigentlich funktioniert.

 

[Fugel]

Hallo Myhar,

danke für deine Antwort. Ja es liegt laut Internet an dieser functions.scss, die muss vorher geladen werden damit es funktioniert. Auch war wie du schon geschrieben hast das !default falsch, das habe ich schlicht weg vergessen zu entfernen. Man lernt halt nie aus

 

[Myhar]

Sehr komisch, ich habe jetzt auch extra nochmal bei meinem Projekt nachgesehen, da binde ich die functions.scss nach meiner customVariables ein. Zugegeben, ich habe da erst mal nur die primary-color und ein paar border-radius Attribute geändert, aber es funktioniert. Ist aber gut zu wissen, dass ich hier eventuell die functions.scss anders einbinden muss, falls es mal zu Problemen kommt.

hmm ok nachdem ich es mir im Detail angesehen habe: Klar, die variables.scss verwendet mixins aus der functions.scss. Man muss nicht die komplette variables.scss kopieren, es reicht, wenn in der customVariables.scss nur die Werte stehen, die geändert werden sollen. So lange dort dann keine mixins verwendet werden klappt es auch, dass man die Files von bootstrap nicht neu anordnen muss.

Beispiel, damit deutlicher wird, was ich meine:
In meiner _customVariables.scss steht nur folgendes:

$primary: pink;

$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;

Dadurch sieht man auch schneller, was jetzt eigentlich an bootstrap angepasst wurde und was noch die Standardwerte hat (alles, was nicht hier drinnen steht, hat noch den Standardwert)
In meiner app.scss habe ich dann folgendes:

// Settings
@import "customVariables"; <-- hier dürfen keine mixins stehen, die erst in _functions.scss definiert werden

// Bootstrap import
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; 

//@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
//@import "bootstrap/scss/type";
//@import "bootstrap/scss/images";

/*
@import ..... ;
und all der Rest von bootstrap.scss,
das was ich (noch) nicht benötige von bootstrap ist auskommentiert, damit das erzeugte SCSS nicht zu groß wird.
*/

 

[Fugel]

Super, danke für den Gegentest.