eckig. Wie importiere ich css von node_modules

Question

Ich benutze angular 5. Im meinem Modul verwende ich Broschüre 1.2.0.

In leaflet.css Ich habe Probleme mit Bildern, zum Beispiel einige CSS-Linien:

.leaflet-retina .leaflet-control-layers-toggle { 
    background-image: url(/assets/images/leaflet/layers-2x.png); 
    background-size: 26px 26px; 
} 

/* Default icon URLs */ 
.leaflet-default-icon-path { 
    background-image: url(/assets/images/leaflet/marker-icon.png); 
} 

Also, ich brauche leaflet.css seiner relativen Weg für den Zugriff auf das, was ich versucht:

@Component({ 
    selector: 'myComponent', 
    template:`<div id="myId" class="myClass"></div>`, 
    styleUrls: ['./myComponent.component.scss','/../../../../node_modules/leaflet/dist/leaflet.css'], 
}) 

Die Struktur Ordner:

--project_folder 
    --node_modules 
    --leaflet 
     --dist 
      --leaflet.css 
    --src 
    --app 
     --myComponentParent 
     --myComponent 
      --myComponent.component.ts 
      --myComponent.component.scss 
      --myComponent.component.html 

Kann ich verweise aus src in den Ordner? Wie kann ich es tun?

Answer 1

Wenn Sie Angular CLI verwenden, müssen Sie das Leaflet CSS-Datei auf die Stile hinzufügen Array enthalten in. angular-cli.json und entfernen css import von anderen Orten

"styles": [ 
     "styles.css", 
     "../node_modules/leaflet/dist/leaflet.css", 
] 

Answer 2

Keine Notwendigkeit, wie folgt hinzuzufügen. in Ihrem angular-cli.json Datei Style-Tag mit dem Pfad Skript hinzufügen

"styles": [ 
     "../node_modules/leaflet/dist/leaflet.css", 
] 

das Skript aus Ihrer Komponente entfernen

styleUrls: ['./myComponent.component.scss'],