Web Inspektor in safari

Die Fragestellung verrät eine falsche Arbeitsweise. man verändert grundsätzlich nichts an den vorhandenen CSS-Dateien.
Ich füge über den ....libray,yml-File im Theme eine eigene CSS-Datei als letzte CSS-Datei ein. Dort sammle ich meine Änderungen. Damit brauche ich mich bei Updates an dem jeweiligen Theme auch nur um meine eigene CSS-Datei zu kümmern.
Über inspect bekommst Du in Safari oder auch im Firefox nur den Namen der zu Grunde liegenden CSS-Datei angezeigt und nicht, wo sie liegt. Bei meiner Arbeitsweise spielt das aber keine Rolle, da ich das Original nicht anfasse (Ich entwickle auf dem Mac mit Firefox und nicht mit Safari).
Außerdem benutze ich Sass für meine Änderungen. Mit der kostenlosen Scout App (gibt es für verschiedene Betriebsysteme) wandle ich die scss-Datei in CSS um. Das ist übersichtlicher als immer lange Selector-Ketten zu schreiben. An Sass muß man sich erst etwas gewöhnen, aber es lohnt sich auf jeden Fall. Sass bietet Variablen und eigene Funktionen und ist besser lesbar als reines CSS.

https://youtu.be/DjxCyBgrI9M

Werner, danke. Ich habe Olivero als Theme gewählt und leider hat etwas mit der Subtheme Entwicklung nicht funktioniert. Habe dann gelesen, dass Olivero noch Probleme als Subtheme hat. Also Sass lernen. Danke. Gruss Michael

Vielen Dank fuer Dein Video, Du hast Dir wirklich Muehe gegeben, werde nun versuchen der Sache näher zu kommen. Vielen Dank!!

Olovero ist etwas störrisch, was Subtheming angeht. Es gibt aber für Drupal 10.1-dev einen Patch für das Subtheme-Script. Nach Anwendung des Patches hast Du ein Script zum Erstellen eines Subthemes für Olivero. Es wird nur nicht in einen custom-Ordner gelegt, selbst wenn der existiert, sondern liegt im Themes-Ordner. Das Arbeiten mit dem CSS von Olivero und seine sonstigen Eigenheiten bringen mich aber von der Benutzung ab, zumindest in meinen Trainings. Das ist Neulingen einfach nicht zu vermitteln.

Ich glaube deine Kursteilnehmer werden durchaus versthen, was Mike in Readme des Repository geschriben hat, in der er erklärt, wie man Olivero kopiert und warum es kein Sub-Theme für Olivero gibt:

Quelle:

https://github.com/mherchel/olivero-subtheme
Daran hat sich bis jetzt nichts geändert. Olivero ist zwar mittlwerwile im Core, aber das Team hinter dem Theme macht bis heute Anpassungen am Theme, damit es an die Neuerungen in Drupals Kernsystem angepasst ist, wenn es welche gab. Das beinflusst vor allem regelmößig das Markup und die bezeichnungen der CSS-Klassen. Ein Sub-Theme würde bedeutetn, dass diese Art Änderungen in Olivero nicht mehr möglich sind, um zu gewährleisten dass ein Sub-Theme auf Grundlage von Olivero weiterhin funktioniert. Deswegen ist Sub-Themeing mit dem Stanndard-Theme des Kernsystems nicht möglich. Es kann aber mittels des erwähnten Scripts oder auch manuell ein Derivat von Olivero erstellt werden. Da es sich dabei offiziell nicht um ein Sub-Theme, sonderen aus den genannten Gründenum ein eigenständiges Theme handelt landet es auch nicht im custom Ordner. Für mioch klingt das sehr nachvollziehbar, sehr plausibel und duirchaus vermittelbar.

Lieber Joachim,
habe versucht Dein Video nachzuahmen-komme aber nicht weiter.
1.Vscode auf meinem Computer installiert (macbookair)
2. Drupal9 Seite auf lokalem Server “Xampp” installiert (mit Composer)
3. Development mode mit composer auf Drupal9 Seite installiert
4. Zugriff auf settings.php erlaubt
--- bisher ok, aber nun:
ich gehe in Vscode auf mein Drupal9 (unter Xampp) und waehle “Olivero”.
Wenn ich die “page.html.twig” waehle (mit run and debbuging ) passiert aber nichts.
Wie kommst Du zu der Einstellung (in deinem Video): siehe Screenshot unten.

Ist es mit VScode überhaupt möglich Twig Dateien wie html file zu behandeln?
Gibt es etwas aehnliches wie "open with live server"?
Vielen Dank.
Michael

Ich hab das im video genannte Modul aktiviert und die Entwicklerwerkzeuge meines Browsers geöffnet. Der zeigt die entsprechenden kommentare im HTML-Quelltext an.