Contao-Camp 2024
Ergebnis 1 bis 15 von 15

Thema: 4.6.12 Bootstrap installieren bzw. korrekt einbinden

  1. #1
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard 4.6.12 Bootstrap installieren bzw. korrekt einbinden

    Servus zusammen,

    ich hänge bei einem neuen Projekt leider wieder an Bootstrap. Eigentlich wollte ich es eins zu eins von einem anderen Projekt abschauen....aber irgendwas ist hier anders bzw. es funktioniert so nicht.

    Die Bootstrap Source Files liegen lokal auf dem Server. Über meine styles.scss will ich das Framework einbinden und ich Anschluss meine Anpassungen einfügen.

    Ich habe folgende Struktur:

    • jbz
      • css
        • bootstrap
          • scss
            • bootstrap.scss

          • ...
          • ...

        • styles.scss


    In dieser styles.scss ist ganz am Anfang ein Import:
    Code:
    @import 'bootstrap/scss/bootstrap';

    Genau so hatte ich es eigentlich bei einem anderen Projekt....aber irgendwie mag es nicht.

    Die Seite meldet "Es ist ein Fehler aufgetreten" und folgender Fehler steht im Log:

    Code:
    [2019-01-10 11:12:03] request.INFO: Matched route "contao_frontend". {"route":"contao_frontend","route_parameters":{"_route":"contao_frontend","_token_check":true,"_controller":"Contao\\CoreBundle\\Controller\\FrontendController::indexAction","_scope":"frontend","alias":"test/layout"},"request_uri":"https://www.jagdbildungszentrum.de/test/layout.html","method":"HEAD"} []
    [2019-01-10 11:12:03] request.INFO: Matched route "contao_frontend". {"route":"contao_frontend","route_parameters":{"_route":"contao_frontend","_token_check":true,"_controller":"Contao\\CoreBundle\\Controller\\FrontendController::indexAction","_scope":"frontend","alias":"test/layout"},"request_uri":"https://www.jagdbildungszentrum.de/test/layout.html","method":"GET"} []
    [2019-01-10 11:12:04] request.CRITICAL: Uncaught PHP Exception Leafo\ScssPhp\Exception\ParserException: "parse error: failed at `&} {` /homepages/46/xxx/htdocs/jagdbildungszentrum-v2/files/jbz/css/bootstrap/scss/mixins/_badge.scss on line 5" at /homepages/46/xxx/htdocs/jagdbildungszentrum-v2/vendor/leafo/scssphp/src/Parser.php line 128 {"exception":"[object] (Leafo\\ScssPhp\\Exception\\ParserException(code: 0): parse error: failed at `&} {` /homepages/46/d346729057/htdocs/jagdbildungszentrum-v2/files/jbz/css/bootstrap/scss/mixins/_badge.scss on line 5 at /homepages/46/xxx/htdocs/jagdbildungszentrum-v2/vendor/leafo/scssphp/src/Parser.php:128)"} []
    Leider werde ich aus dieser Meldung nicht ganz schlau denn die Files sind vorhanden und der Pfad ist eigentlich auch korrekt.


    Wie bindet ihr denn Bootstrap ein?

    VG
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Kahmoon (10.01.2019 um 11:23 Uhr)

  2. #2
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Mit Bootstrap für Contao.

    https://contao-bootstrap.de/

    OK, was genau versuchst Du denn da eigentlich? Wenn Du mit der Erweiterung arbeitest, brauchst Du ja eigentlich nur noch das CSS laden.

  3. #3
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Mein Stand der Dinge ist das auch bei dieser Erweiterung die Einbindung von Bootstrap selbst gemacht werden muss.

    Siehe Doku:
    "Contao-Bootstrap integriert nicht das Bootstrap-Framework. Dies liegt in der Verantwortung des Benutzers. Dadurch ist die Erweiterung vollständig unabhängig von dem bevorzugten CSS- und Javascript-Workflow. Ob CSS, Less, Sass - es werden keine Vorgaben gemacht. Möglichkeiten zur Integration werden im Bootstrap Framework einbinden aufgezeigt.""
    Geändert von Kahmoon (10.01.2019 um 11:49 Uhr)

  4. #4
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Zuerst musst Du mal den Schreibfehler in der Datei korrigieren, sonst geht das nicht. Und dann beschreib nochmal genauer, was danach nicht geht und was Du machen willst.

  5. #5
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Was für einen Schreibfehler?

    Eigentlich kann ich es nicht genauer beschreiben als oben.

    1. Komplettes Bootstrap liegt lokal auf dem Server. Kein CDN
    2. Einbindung im Layout über die styles.scss die das Bootstrap Framework via Import lädt.

  6. #6
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Nur mal zum Verständnis, Du bindest die scss files direkt ein, verzichtest also bewusst auf die vendor-prefixes?

    Ich kompiliere das bei mir lokal und schieb dann die daraus resultierende css auf den Server, habe es aber auch schon so gemacht wie Du, was mir aber aus o.g Grund nicht gefiel.

    Kann da jetzt auch den Fehler nicht auf Anhieb erkennen

  7. #7
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Ich will das Contao kompiliert. Das will ich nicht separat lokal etc. machen. Was sind vendor prefixes?

    Ich könnte Bootstrap theoretisch auch über die zusätzlichen Head Tags vom Bootstrap CDN einbinden. Bin mir nicht sicher ob das Nachteile hat (DSGVO und so Zeuch)
    Geändert von Kahmoon (10.01.2019 um 11:58 Uhr)

  8. #8
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Den aus der Fehlermeldung?

    Code:
     "parse error: failed at `&} {` /homepages/46/xxx/htdocs/jagdbildungszentrum-v2/files/jbz/css/bootstrap/scss/mixins/_badge.scss on line 5"
    Zeile 5 hat einen Schreibfehler...

  9. #9
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Hmm das sind ja Files von Bootstrap Framework selbst. Da habe ich nix verändert.


    Code:
    @mixin badge-variant($bg) {
      color: color-yiq($bg);
      background-color: $bg;
    
    
      @at-root a#{&} {
        @include hover-focus {
          color: color-yiq($bg);
          background-color: darken($bg, 10%);
        }
      }
    }
    Ich sehe da direkt den Fehler nicht....entferne ich den Code komplett geht es.

  10. #10
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zumindest auf Github sieht die _bagde.scss etwas anders aus ...

  11. #11
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Strange...hab das frisch von bootstrap.com geladen

    Dann nehme ich mal die von dort. Danke

    Edit: Die mag er auch nicht

    Code:
    @mixin badge-variant($bg) {
      color: color-yiq($bg);
      background-color: $bg;
    
    
      @at-root a#{&} {
        @include hover-focus {
          color: color-yiq($bg);
          background-color: darken($bg, 10%);
        }
    
    
        &:focus,
        &.focus {
          outline: 0;
          box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
        }
      }
    }
    Geändert von Kahmoon (10.01.2019 um 12:18 Uhr)

  12. #12
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Kahmoon,
    ich schätze mal du läufst in ein Problem von der ScssPHP Lib. Die kann nicht alles, aber fast alles. Und wenn die etwas nicht kann, dann gibt es komische Fehlermeldungen ;-)
    Deswegen ist es eigentlich immer besser die SCSS-Dateien Lokal umzuwandeln und nicht von Contao (also von ScssPHP). Sonst musst du immer schauen, was da gerade von der Syntax eben nicht geht. Da gibt es auch Seiten zu im Internet, wo man nachgucken kann.. aber das war mir immer zu aufwändig da auch noich drauf achten zu müssen.

    Lokal ist auch gar nicht so viel schwieriger, wenn man das dann automatisch holaden lässt ;-)

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  13. #13
    Contao-Nutzer
    Registriert seit
    30.03.2012.
    Beiträge
    60

    Standard

    Hat jemand noch eine Idee oder einen Lösungsansatz, ich habe das gleiche Problem und komme an der Stelle nicht weiter. Finde es äußerst praktisch, dass Contao die Kompilierung übernimmt.

  14. #14
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Je nach den Möglichkeiten des Hostings kann man sass auch auf dem Server installieren und so konfigurieren, dass das in Contao eingebundene CSS immer aktuell ist. Hatte das mal laufen in einer Installation, war allerdings bei uberspace, muss also nicht überall funktionieren. Stichwort: sass --watch ... Das startet man dann, wenn man am SCSS arbeitet und stoppt es wieder wenn alles - zumindest für den Moment - fertig ist.

  15. #15
    Contao-Nutzer
    Registriert seit
    30.03.2012.
    Beiträge
    60

    Standard

    Mittlerweile gibt es dazu einen issue bei Github:
    https://github.com/leafo/scssphp/issues/616

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •