Wie kann ich die Standard-Farbvariablen mit scss in Ionic ändern?

Question

Ich arbeite schon seit geraumer Zeit mit Ionic, bin mir aber nicht sicher, wie ich scss dazu benutzen soll. Beim Erstellen eines neuen Ionic-Projekts habe ich einen scss-Ordner mit einer scss-Datei darin. Ich habe alles versucht, aber meine Änderungen haben keinen Einfluss auf das CSS meiner Seite. Kann mir jemand genau sagen, was ich tun muss, um mit scss zu arbeiten? Wir versuchen lediglich, die von Ionic bereitgestellten Standardfarbvariablen zu ändern.

Ich habe die erforderlichen Einstellungen wie beschrieben here durchgeführt.

Hier ist meine ionic.app.scss Datei in SCSS Ordner:

/* 
To customize the look and feel of Ionic, you can override the variables 
in ionic's _variables.scss file. 

For example, you might change some of the default colors: 

$light:       #fff !default; 
$stable:       #f8f8f8 !default; 
$positive:      #387ef5 !default; 
$calm:       #11c1f3 !default; 
$balanced:      #33cd5f !default; 
$energized:      #ffc900 !default; 
$assertive:      #ef473a !default; 
$royal:       #886aea !default; 
$dark:       #444 !default; 
*/ 

// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 

// Include all of Ionic 
@import "www/lib/ionic/scss/ionic"; 

Hier Datei in lib/ionic/scss Ordner meine _variables.scss ist:

// Colors 
// ------------------------------- 

$light:       #fff !default; 
$stable:       #f8f8f8 !default; 
$positive:      #387ef5 !default; 
$calm:       #11c1f3 !default; 
$balanced:      #33cd5f !default; 
$energized:      #ffc900 !default; 
$assertive:      #ef473a !default; 
$royal:       #886aea !default; 
$dark:       #444 !default; 


// Base 
// ------------------------------- 

$font-family-sans-serif:   '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default; 

$font-family-light-sans-serif: '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default; 

vorgenommene Änderungen in der _variables.scss nicht gezeigt in meiner App und ich verstehe nicht warum.

Hier ist meine Konsole nach dem Laufen Schluck drin.

abc-Mac-mini:FileFolder xyz$ gulp 
[10:34:49] Using gulpfile /Applications/MAMP/htdocs/FileFolder/gulpfile.js 
[10:34:49] Starting 'sass'... 
[10:34:50] Finished 'sass' after 731 ms 
[10:34:50] Starting 'default'... 
[10:34:50] Finished 'default' after 15 μs 
abc-Mac-mini:FileFolder xyz$ 

Answer 1

Sie werden die folgende Datei in Ihrem ionischen Projekt haben.

www/css/ionic.app.css 

Kopie alle css aus dieser Datei und fügen Sie ihn in Ihre scss Datei.

beginnen jetzt Änderungen in SCSS Datei

Answer 2

Wenn ich richtig verstehe machen, versuchen Sie, die Standardfarben von Ionic bereitgestellt außer Kraft zu setzen, wie $positive und $assertive. Die empfohlene Vorgehensweise besteht darin, die vorhandenen Variablen zu überschreiben, die von Ionic definiert wurden, und nicht die Variablen in den Ionic-Quelldateien zu ändern.

Wenn Sie ein Ionic Projekt zu starten, erhalten Sie die folgenden Kommentare oben in der ionic.app.scss Datei:

/* 
    To customize the look and feel of Ionic, you can override the variables 
    in ionic's _variables.scss file. 

    For example, you might change some of the default colors: 

    $light:       #fff !default; 
    $stable:       #f8f8f8 !default; 
    $positive:      #387ef5 !default; 
    $calm:       #11c1f3 !default; 
    $balanced:      #33cd5f !default; 
    $energized:      #ffc900 !default; 
    $assertive:      #ef473a !default; 
    $royal:       #886aea !default; 
    $dark:       #444 !default; 
*/ 

Also alles, was Sie tun müssen, ist uncomment die Variablen, die Sie ändern wollen, und es sollte in widerspiegeln deine App Stellen Sie sicher, dass diese Variablen deklariert sind, bevor Ionic importiert wird, da andernfalls die Ionic-Farbvariablen Ihre benutzerdefinierten Variablen außer Kraft setzen.

Ein Beispiel:

$positive: #FF0000 !default; 

// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 

// Include all of Ionic 
@import "www/lib/ionic/scss/ionic"; 

Dadurch werden alle Elemente drehen Sie die $positive Farbe Rot verwenden. Stellen Sie außerdem sicher, dass Sie die Konsole überprüfen, um festzustellen, ob Kompilierungsfehler vorliegen. Wenn ein Fehler in der CSS-Datei vorliegt, wird gulp nicht kompiliert. Vergessen Sie außerdem nicht, dass das scss jedes Mal kompiliert werden muss, wenn Sie eine Änderung vornehmen. Dies geschieht automatisch, wenn Sie ionic serve zum Testen verwenden oder gulp watch ausführen.