Angular 2 Component Styles, die css-Importe von node_modules nicht auflösen

Question

Basierend auf der Dokumentation, die unter gefunden wurde, habe ich versucht, die Stylesheets zu importieren, die unter den node_modules gefunden werden; dh:

test.component.css:

@import '~@angular/material/core/theming/all-theme.css';

Wobei die Komponente definiert:

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'test.component.html', 
    styleUrls: ['test.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class TestComponent { 
} 

Leider, wenn Sie auf die Seite durchsucht, es kommt, dass die ~ @ Winkel/material/core/thema/all-theme.css kann nicht gefunden werden.

Dieses Projekt wurde mit dem Angular-Cli erstellt.

Ich vermute, ich könnte in den Stilen kopieren, und verweisen Sie auf diese Weise, aber ich würde lieber die Bibliothek Abhängigkeiten trennen.

Answer 1

Wenn Sie Stylesheet aus Knotenmodul Ordner aufnehmen möchten .. Sie es einfach hinzufügen müssen in .angular-cli.json

"styles": [ 
    "../node_modules/bootstrap/scss/bootstrap.scss" 
] 

Auch brauchen Sie nicht encapsulation:ViewEncapsulation.None hinzufügen, bis Sie Erstellen Sie Ihre HTML dynamisch mit einigen Drittanbieter-Plugin oder einige zufällige CSS hinzufügen.

Sie können immer globalen CSS verwenden, die in Ihrem .angular-cli.json enthalten sind

Answer 2

Das Problem ist mit der Dateierweiterung. Sie verwenden die Erweiterung css, die das Importieren von Dateien vom anderen Speicherort nicht unterstützt, so dass Sie die Erweiterung in ändern können. In diesem können Sie die Dateien von node_modules importieren.