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

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.

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.""

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.

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.

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

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

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)

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... ;)

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.

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

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

Dann nehme ich mal die von dort. Danke

Edit: Die mag er auch nicht :D

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);
    }
  }
}

---

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

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.

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.

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