CSS-Var nicht möglich - nur im Developermodus?! (--foo: bar;)

Thema wurde von MJ, 25. April 2022 erstellt.

  1. MJ

    MJ Erfahrener Benutzer

    Registriert seit:
    28. April 2011
    Beiträge:
    525
    Danke erhalten:
    54
    Danke vergeben:
    91
    Guten Tag

    Ich habe im Developermodus mein CSS entwickelt und muss nun nach dem Deaktivieren des Developermodus feststellen, dass meine CSS-Variablen nicht mehr funktionieren. Sie werden schlicht nicht generiert. In der main.css sieht es so aus als gäbe es sie nicht. Das ist ziemlich *****.
    Liegt die .dev-environment im Root, funktioniert alles wunderbar.

    Kann mir da jemand helfen?

    @gambio ?

    Vielen Dank
    MJ (Jens)

    PS: Mein CSS liegt hier: \GXModules\meinname\meinmodul\Shop\Themes\Malibu\Css\custom.css
     
  2. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.656
    Danke erhalten:
    1.261
    Danke vergeben:
    300
    @MJ, Bitte stelle doch mal ein paar CSS Codes hier zur Verfügung damit man das mal ansehen und nachstellen kann.

    Nur als kleiner Tipp, wenn du SCSS nutzen wilst, musst du eine Datei mit dem Namen "main.scss" erstellen, das wird dann vom Shop automatisch nach CSS kompiliert und da können Variablen auch genutzt werden.
     
  3. MJ

    MJ Erfahrener Benutzer

    Registriert seit:
    28. April 2011
    Beiträge:
    525
    Danke erhalten:
    54
    Danke vergeben:
    91
    @Till (Gambio) - sehr gern. Ich hab alle anderen Plugins von mir entfernt und nur diese Datei drin gelassen.
    Code:
    :root {
        --color1: #95569E;
        --color2: #97907c;
        --color3: #F8F6F2;
    }
    
    #header {
      background: var(--color3) !important;
    }
    Sie liegt hier: \GXModules\MyName\_Default\Shop\Themes\Malibu\Css\custom.css

    Ich habe ein Bild angehangen mit dem jeweiligen Ergebnis - einmal im Developer-Modus, einmal ohne. Demnach wird das vermutlich verschluckt beim minifying in die main.min.css
     

    Anhänge:

  4. MJ

    MJ Erfahrener Benutzer

    Registriert seit:
    28. April 2011
    Beiträge:
    525
    Danke erhalten:
    54
    Danke vergeben:
    91
    Das heißt dann vermutlich 'Nein, geht nicht. Mach das mit SCSS!'
     
  5. Moritz (Gambio)

    Moritz (Gambio) Administrator

    Registriert seit:
    26. April 2011
    Beiträge:
    5.786
    Danke erhalten:
    2.692
    Danke vergeben:
    903
    Wie du schon vermutet hast, unterstützt der CSS-Minifier wohl keine CSS-Variablen (habs jetzt noch nicht genau untersucht). SCSS ist dann eher dein Freund oder du bindest das CSS auf anderem Wege ein. Wenn das nur so wenig CSS ist, käme ja vielleicht auch ein Inline-CSS-Block im HTML in Frage.
     
  6. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.656
    Danke erhalten:
    1.261
    Danke vergeben:
    300
    @MJ Ja, SCSS ist hier die Lösung, das wird vom Shop ohne weiteres unterstützt und die Syntax ist auch ähnlich.

    Wenn du also eine main.scss Datei im Ordner \GXModules\MyName\_Default\Shop\Themes\Malibu\Css ablegst, mit folgendem Inhalt, sollte das ohne große Probleme funktionieren:

    Code:
    $color1: #95569E;
    $color2: #97907c;
    $color3: #F8F6F2;
    
    
    #header {
      background: $color3 !important;
    }
     
  7. MJ

    MJ Erfahrener Benutzer

    Registriert seit:
    28. April 2011
    Beiträge:
    525
    Danke erhalten:
    54
    Danke vergeben:
    91
    Nein das war nur ein Beispiel ^^
    Aber dann haben wir das auch geklärt :)

    Ja da lohnt es sich nicht, extra was anzupassen - mit SCSS geht's auch.
    Danke @moritz und @Till