Contao 5.7.3 TWIG-TEmplate Css einbinden

[Schnippel]

Hi Leute,

ich habe eine zentrale CSS-Datei zentrale.scss
In dieser laufen alle anderen CSS-Dateien zusammen,( also typo.scss, slider.scss etc.)
Bisher konnte man im BA diese zentrale.scss einbinden, die dann als komprimierte css-Datei letztendlich von Contao gelesen wurde.

Jetzt mit TWIG Template habe ich die zentrale_fruntke.scss-Datei wie folgt eingebunden

Unbenannt-2.jpg

Diese liegt unter

files/layout/scss/zentrale_fruntke.scss

Ich habe das Problem, daß die CSS-Anweisungen nicht zu sehen sind.
Systemwartung wurde aktualisiert.

[Dean]

Sieht auf den ersten Blick erstmal alles in Ordnung aus. Kommt denn der Stylesheet-Link auch im Frontend-Quelltext an? Ist die Variante im Layout entsprechend ausgewählt? Ist der Ordner, in dem das Stylesheet liegt, denn auch wirklich "public"?

[zoglo]

Das SCSS musst du kompilieren, die asset() Funtkion übernimmt das für dich nicht.
Scss lokal mit Buildchain bspw. PostCSS zu CSS kompilieren, dann deployen und die CSS einbinden.

[BugBuster]

Notfalls ginge eventuell auch https://github.com/oveleon/contao-theme-compiler-bundle
Und dann das compilierte im Twig Layout einbinden.

"eventuell" deshalb, ich hatte Probleme mit relativen Pfaden in den Dateien, das Ziel musste in der selben Ebene sein wie die scss Quelle, dann ging das schon mal.
Aber dann war das Ergebnis manchmal nicht identisch wie die Contao interne Version bei Verwendung des Standard Layouts. Warum konnte ich nicht rausfinden.

[Dean]

Ich hatte das "s" in scss in der Tat gedanklich ignoriert. Dennoch könnte man ja prüfen, ob die SCSS-Datei nach der Einbindung als Asset im Frontend "ankommt". Auch wenn sie ohne JS-SCSS-Compiler keine Auswirkungen auf das Layout hat.

[mlweb]

@BugBuster
Hast Du das contao-theme-compiler-bundle schon mit Contao 5.7 getestet?

[mlweb]

Das SCSS musst du kompilieren

Alternativ kann man je nach Vorliebe und Wissenstand mit den heutigen Möglichkeiten von CSS durchaus überlegen auf SCSS zu verzichten und auf natives CSS setzen. Nesting, Variable und einiges mehr sind ja inzwischen auch im CSS vorhanden.

[BugBuster]

@BugBuster
Hast Du das contao-theme-compiler-bundle schon mit Contao 5.7 getestet?

Ja, damit habe ich mit Verbindung von lukasbableck/contao-twig-layout-assets-bundle die Contao Demo mal umgestellt auf Twig.
https://contao.ninja/contao-tipps/ti...mit-slots.html

Bin aber daran dann zerbrochen und habe es sein gelassen.
Habe mir die scss dann einmal von Contao compilieren lassen Das Ergebnis dann wegkopiert und ab dann die genommen.

[Schnippel]

Sieht auf den ersten Blick erstmal alles in Ordnung aus. Kommt denn der Stylesheet-Link auch im Frontend-Quelltext an? Ist die Variante im Layout entsprechend ausgewählt? Ist der Ordner, in dem das Stylesheet liegt, denn auch wirklich "public"?

Der Link ist im HTML zu sehen.
Die Variante (TWIG-Template) ist im Seitenlayout ausgewählt
Die zentrale_fruntke.scss-Datei liegt im Ordner files/layout/scss

Was meinst du mit "wirklich public"?
Im Ordner public ist die Ordnerstruktur ebenfalls zu sehen, ebenfalls mit den scss-Dateien.

Wenn ich mir im Frontend mit F12 die Elemente anschau, da ist aber nix an CSS-Anweisungen zu sehen.

Früher gab es mal in Contao im Seitenlayout , "externe CSS" und "Skripte zusammenfassen", dieses finde ich im TWIG Seitenlayout nicht mehr.

Was muß ich wo wie machen, damit das externe CSS umgestzt wird?
Ich erstelle das CSS in einem exterenen Editior DreamWeaver.

[Schnippel]

Das SCSS musst du kompilieren, die asset() Funtkion übernimmt das für dich nicht.
Scss lokal mit Buildchain bspw. PostCSS zu CSS kompilieren, dann deployen und die CSS einbinden.

Ich arbeite mit einem CSS-Editor lokal auf dem PC. Beim Speichern werden die Änderungen auf dem Server gleich aktualisiert.
Aber in Contao tut sich da nix. Früher konnte ich unter Sytemwartung > Daten bereinigen das Contao-System aktualisieren, und danach waren dann auch die neuen CSS-Anweisungen im FE sichtbar.

Bis jetzt tut sich bei meiner neuen Installation Contao 5.7.3 noch nix :-/


Leute, Frage an euch:
Wie macht ihr das in der Praxis, wenn ihr CSS schreibt, damit die Änderungen auch sofort in Contao zu sehen sind?
Es müsste ja eigentlich so sein, daß beim Speichern im externen CSS-Editor, der die Datein auf dem Server mit aktualisiert, diese im FE sichtbar sein sollten..

[zoglo]

Es müsste ja eigentlich so sein, daß beim Speichern im externen CSS-Editor, der die Datein auf dem Server mit aktualisiert, diese im FE sichtbar sein sollten..

Hot Module Replacement mit webpack dev-server, lokal die Website und kompiliert bei Änderungen mit einem Filewatcher. Änderungen siehst du also sofort.
Wenn es auf dem Server sein soll und es sonst nix gibt, dann bei kleinen Sachen bspw. mit UserCSS oder blind alles vorstylen und danach übertragen.

Das ThemeCompiler Bundle nutzt auch nur scssphp wie Contao, für Bugbuster hat es dann mit SCSSPHP in v2 nicht gepasst, einen conflict darauf und das speclose libscss in scssphp v1.0 würde womöglich weiterhin laufen. Da kann man dann natürlich auch per Command das Theme kompilieren aber gute DX ist was anderes.