Angular fügen benutzerdefinierte. CSS-Dateien zu Angular-CLI-Projekt

Question

Ich füge vorhandene .js und .css-Dateien zu einer Angular 4 App, die angle-CLI 1.0.6 verwendet. Bis zu einem kürzlichen Upgrade habe ich sie einfach in index.html referenziert - ich weiß, das ist "falsch", aber es funktionierte für meine aktuellen Bedürfnisse.

Nach einem aktuellen Update, bekomme ich 404s für alles, was ich versucht habe. Ich habe es geschafft, die JavaScript-Datei hinzuzufügen, indem ich sie zu angle-cli.json hinzufüge und sie dann in eine Komponente importiere. Das funktioniert, aber das gleiche funktioniert nicht für die .css-Datei.

Ich habe es in index.html versucht: <link rel="stylesheet" type="text/css" href="/scripts/test.css"> Ich habe in der Komponente Vorlage versucht: <link rel="stylesheet" type="text/css" href="../../../app/scripts/test.css"> Und ich habe versucht, es die zu Stilen in der Komponente hinzufügen: styleUrls: ['../edit.scss', '../../scripts/test.css'],

Ich erhalte 404s für alle, obwohl die Pfade gültig sind (ich kann ihnen im Editor folgen).

Was ist der richtige Weg, dies zu tun?

Answer 1

Ein angular-cli-Projekt enthält standardmäßig eine styles.css Datei unter dem Ordner src des Projekts (myAngularCliProjectName/src/styles.css).
In dieser Datei können Sie globale Stile hinzufügen und auch andere Stildateien importieren.
Es besteht keine Notwendigkeit, sie aus der index.html Datei zu verknüpfen.

Answer 2

Gehen Sie zu Ihrer eckigen-cli.json-Datei und es gibt eine Eigenschaft von Arrays und Sie können Ihre CSS-Datei an dieser Stelle hinzufügen, genau wie ich es mit bootsrap.min.css getan habe.