Warum erscheinen die Stile eingebettet in inspect Element in Angular 2
Ich habe ein kostenloses HTML-Theme mit dem Namen dashgum aus dem Internet heruntergeladen. Ich implementiere es für eine Angular2-Anwendung mit angular-cli . Ich habe die CSS-Dateien in .scss konvertiert und den Code in die eckige Anwendung eingefügt. Ich habe dann die Dateien in die globale Styles-Datei namens styles.scss importiert, um die Styles folgendermaßen auf die Anwendung anzuwenden:
%Vor%Das Problem, mit dem ich beim Debugging konfrontiert bin, ist, dass alle Stile als eingebettete Stile im Browser angezeigt werden (beachten Sie das style-Tag):
Ich möchte, dass der Stil beim Überprüfen wie im Design als externe Stile angezeigt wird. Bitte beachten Sie es im folgenden Screenshot:
Dies sind die Standardeinstellungen in Angular 2, da ich keine offensichtlichen Änderungen für die eingebetteten Stile bei der Überprüfung vorgenommen habe. Gibt es eine bekannte Möglichkeit, die Einstellungen in Angular 2 zu ändern, damit Stile bei der Untersuchung als externe Stile angezeigt werden? Die eingebetteten Stile machen es mir schwerer zu debuggen. Jede Hilfe, die auf die Lösung hinweist, wäre willkommen.
2 Antworten
Mein erster Rat (wie Offizielle Angular CLI-Dokumentation sagt) ist, Ihre globale Bibliothek in .angular-cli.json wie folgt zu setzen:
Führen Sie dann einfach die App mit dem Parameter --extract-css aus, um im Browser-Inspektor die Quelldateien zu sehen:
Und Sie werden das haben:
Ich habe gelernt, dass die Stile, die in der globalen Datei styles.scss importiert werden, immer eingebettet erscheinen, wenn sie im Browser untersucht werden. Wenn wir möchten, dass die CSS als externe Stile angezeigt werden, müssen wir sie in Komponenten verwenden.
Bearbeiten:
Siehe oben die Antwort von tarioski.