Scss-Struktur für Angular-Anwendungen und Komponenten

Question

Ich erhalte Fehler beim Servieren meiner App mit ng dienen. Die scss-Datei in der Fußzeile verweist auf die Datei styles.css von Assets. Einige der scss-Dateien verweisen jedoch auf svgs von Symbolen, die einen relativen Pfad wie background (../ icons/icon.svg) von assets/styles/styles.css verwenden. Wenn diese Datei von footer.component.scss importiert wird, bricht die Pfadangabe ab. Es versucht, auf src/app/layouts/icons/icon.svg zu verweisen, das in diesem Ordner nicht existiert, aber unter src/assets/icons existiert.

├── app 
| ├── layouts 
|  |──footer 
|   ├── footer.component.ts 
|   ├── footer.component.scss 
| 
├── assets 
| ├── icons 
| ├── css 
|  |──pallette.scss 
|  |──_helpers.scss 
|  |──styles.scss 

Das Ziel, das ich mit Komponenten eine modulare Anwendung zu erreichen versuchen, ist, die für andere Projekte genutzt werden können usw. Es kann eine ganz andere Struktur und Ansatz, dies zu tun, und ich bin offen für all Vorschläge.

Answer 1

../icons/icon.svg ist nicht der richtige Weg.

Versuchen Sie mit /assets/icons/icon.svg und es sollte funktionieren.