Wie man Modulebene CSS in Angular JS einfügt

Ich habe eckiges Projekt besteht aus Frontend und Admin. Ich möchte mein Projekt so skalieren, dass ich verschiedene CSS für Admin und Frontend verwende.Wie man Modulebene CSS in Angular JS einfügt

Struktur meines Projekts ist wie folgt:

--app 
    --admin // Admin Module 
    --admin.module.ts 
    --admin.component.ts 
    --admin-routing.module.ts 
    --admin.component.css 
    --admin.component.html 

    --web // Frontend Module 
    --web.module.ts 
    --web.component.ts 
    --web-routing.module.ts 
    --web.component.css 
    --web.component.html 

--app.module.ts 
--app.component.ts 
--app-routing.module.ts 
--app.component.css 
--app.component.html

ich meine CSS für das Web (Frontend) in .angular-cli.json Datei definiert haben.

"styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
     "styles.css" 
     ],

Wie kann ich verschiedene CSS-Dateien für Admin und das Web laden? Gibt es auch einen besseren Ansatz, mehrere Module in ein und demselben Projekt zu integrieren?

Quelle

2017-08-31 Nehil Mistry

https://magento.stackexchange.com/questions/127523/how-can-i-load-a-custom-css-file-both-in-adminpanel-and- Frontend – anu

Sie können die globalen CSS-Eigenschaften definieren, die sowohl für Server-Betreiber gemeinsam sind und die verbleibenden Benutzer in der "styles.css" Datei und Admin spezifische & verbleibenden benutzerspezifische CSS-Eigenschaften jeweils in admin.component.css und web.component.css definiert werden könnten, die Hoffnung, das hilft

Quelle

2017-08-31 12:38:26

Ich habe versucht, CSS auf Modulebene zu importieren - '@import './assets/styles.css'; ', noch werden keine Ergebnisse wiedergegeben? Was kann der Grund sein –

wo willst du diesen Import machen ?? Sie müssen nicht alle Modulebene Importe ..thats standardmäßig –

importiert importieren Betrachten ich in 'web.component.css' folgende css ich schreibe -' body { font-family: Montserrat, Montserrat-Light, Montserrat-Regular, Montserrat-Bold, Montserrat-Schwarz, serifenlos! padding-top: 100px; } ', Keine Ergebnisse sind auf Web-Ebene refected –

Wenn Sie haben eine Hauptkomponente für jedes Modul, Sie müssen lediglich die .css-Datei an Ihre Komponente im @Component() - Dekorator anhängen.

@Component({ 
    templateUrl: './admin.component.html' 
    styleUrls: ['./admin.component.css'] 
})

@Component({ 
    templateUrl: './web.component.html' 
    styleUrls: ['./web.component.css'] 
})

Quelle

2017-08-31 13:02:26

Wie man Modulebene CSS in Angular JS einfügt

Antwort

Verwandte Themen