Problem: SCSS-Support in Themes ist veraltet

[ChristianDE]

Hallo,

ich habe ein großes Problem mit dem Shopify Editor. Hier wird mir folgendes angezeigt: 

SCSS-Support in Themes ist veraltet

Wandle .scss- und .scss.liquid-Dateien für eine bessere Leistung des Onlineshops und Theme-Editors in .css- oder .css.liquid-Dateien um.

Was soll ich machen? Wie wandle ich .scss und .scss.liquid Dateien in css um? Ich hoffe man findet schnell eine Lösung. 

Vielen Dank

[ChristianDE]

Hilfe !!!!!

Seitdem ich den Code neu gespeichert habe, ist der Shop komplett zerstört. Ich bin total enttäuscht!!!!!!!!!!!!!

Ich benutze das Shopify Venture Theme seit Juni 2020.

[r8r]

Vielleicht eine blöde Frage, aber hast Du ein einigermaßen aktuelles Backup deines Themes? Notfalls müsstest Du sonst Venture noch einmal installieren und dann aus diesem jungfräulichen Theme die beim Production-Theme in Mitleidenschaft gezogenen Dateien ersetzen.

[ChristianDE]

Hi,

einen Unterschied von meinem Venture Theme zum neusten konnte ich jetzt nicht entdecken. Das neuste Venture Theme nutzt immer noch scss.

Wenn ich bei sass meister und bei anderen online compilern reinkopiere kommt dort die Antwort : Error, unable to compile code (cssportal)

Der Code ist aber eigentlich Fehlerlos.

[ChristianDE]

@r8r 

Ich benötige leider genauere Instruktionen. Ich wäre dir sehr dankbar, wenn ich eine schnelle und einfach erklärte Lösung von dir oder jemand anderem erhalten könnte. Derzeit klappt gar nichts mehr. Der sassmeister konnte mir auch nicht helfen. Es gab keine Ausgabe.

[r8r · Accepted solution]

@ChristianDE

Ich seh die Meldung in mehreren Projekten, jedoch nirgendwo einen Anhaltspunkt dafür, dass aktuell irgendwas davon zerstört würde. Bist du dir sicher, dass dein unmittelbares Problem nicht von einem anderen Fehler (evtl. im SASS-Code?) verursacht wird? Meine Empfehlung vorab: Hintergrundwissen zum Thema aneignen; auch wenn Shopify sich an Laien richtet, wenn du selbst im Code arbeitest, hilft es, wenn du dir den Background zu den verwendeten Technologien zu Gemüte führst.

Aber nun zur eigentlichen Antwort … Im Prinzip müsste das Ganze wie folgt funktionieren - getestet hab ich’s en Detail aber nicht.
Was du machen kannst ist, dass du die SASS Sourcen durch CSS Sourcen ersetzt. So würd ich’s zusammenfassen:

1. Backup des funktionierenden Themes machen

2. Besorge dir eine Kopie der kompilierten css-Dateien

folgende entweder/oder Optionen fallen mir ein:

a. Verwende Themekit und lade dir das Theme mit theme download runter

die kompilierten css-Dateien sind da inkludiert

b. Kompilier dir die Dateien selbst lokal mit SASS

idealerweise kannst du mit Themetit und theme deploy dann auch gleich die Dateien raufschieben

c. Lade die Dateien im Browser runter

• Quelltext der z.B. Startseite ansehen
• Nach scss suchen
• Pfad der gefundenen Dateien jeweils in neuem Browserfenster öffnen und den Inhalt jeweils als css-Datei speichern

3. Referenzen auf die scss Dateien aus den Liquid Dateien entfernen

Diese sollten in erster Linie in den Dateien im layouts-Ordner zu finden sein; z.B. in der theme.liquid:

Die Dateiendung sollte hier jeweils auf .css geändert werden.

3. css-Dateien anstatt der scss-Dateien im assets-Verzeichnis anlegen

Je scss.liquid-Datei leg eine gleichnamige css.liquid-Datei an - solltest du im Schritt 2 Variante a oder b gewählt haben, könnte das optional sein. Jedenfalls bei Variante c brauchst du nur die von dir gespeicherten css-Dateien in diesen Ordner hochladen.

Liebe Grüße,
Mario

[ChristianDE]

@r8r 

Hallo Mario,

echt vielen Dank für diese schnelle und wirklich sehr ausführliche Antwort von Dir. Diese Anleitung wird noch sehr vielen Anderen helfen.

LG Christian

[r8r]

@ChristianDE Gerne. Sie bildet natürlich nicht vollinhaltlich alles Aspekte ab (insbesondere etwaige Liquid-Variablen, die in scss-Dateien Verwebdung finden könnten), aber ich glaub, dass du damit schon einmal das Problem fixen kannst!

[r8r]

Hallo @ChristianDE 

Oha … ich vermute, dass die Herrschaften langsam ernst machen: Deprecating Sass in themes

Abhängig davon, wie genau deine Codestruktur aussieht, kannst du SCSS nach CSS mit einem der zahlreichen online-Services transpilen (generieren) – wie z.B. mit SASSmeister.

Nota Bene: SCSS-Dateien sind fast immer die bessere Ressource für deinen Development Code. Shopify möchte aber SCSS nicht mehr dynamisch nach CSS transpilen. Ich empfehle, dass Du die SCSS Sourcen aus deinem assets/ Verzeichnis mit deren CSS Ergebnis ersetzt, die SCSS Quelltexte aber offline archivierst. Von denen kannst Du später wieder CSS transpilen. Du kannst das auch in einen automatisierten lokalen Prozess packen. Empfehlung für Fortgeschrittene: Verwendung von Build-Tools wie Gulp oder Webpack gemeinsam mit Shopify Themekit.

LG, Mario