Wie fügen Sie mit der Angular CLI App-weite CSS-Dateien hinzu?

Question

Ich möchte meiner Angular 2-App einige Shard-Stile hinzufügen, z. B. Schriftarten und Farbschemata, die überall verwendet werden. In der Vergangenheit habe ich das immer getan, indem einen Tag wie folgt meine Index-Seite hinzufügen:

<link rel="stylesheet" href="css/framework.css" /> 

Diese nicht mit funktioniert, was auch immer die CLI mit der App dienen. Ich habe versucht, die CSS-Dateien manuell nach dem Erstellen in den Ordner dist hinzuzufügen, aber das scheint auch nicht zu funktionieren.

Ich habe auch versucht die CSS im anugular-cli-build.js Ordner wie diese es noch die Dateien in den Ordner css nicht aus

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'css/*.css' 
    ] 
    }); 
}; 

Zugabe scheinen zu bauen, wenn ich es sagen zu bauen.

Das fragliche Stylesheet soll die Grundlinienstile für die gesamte App sein und nicht etwas, das ich im styleUrl-Tag haben möchte.

Answer 1

Die vendorNpmFiles-Konfiguration dient dazu, dem CLI mitzuteilen, welche node_module in das Verzeichnis dist kopiert werden sollen.

Ich konnte nur ein "Ressourcen" -Verzeichnis in meinem src-Verzeichnis erstellen, meine App-weite CSS-Datei dort einfügen, und es wurde ohne weitere Konfiguration in den Dist-Build kopiert.

src 
|- app 
| | 
| 
|- css 
| | 
| |- framework.css 
| 
|- index.html 

Wenn Sie einen Rahmen wie Bootstrap enthalten sind versuchen, dann ja, können Sie die vendorNpmFiles Konfiguration verwenden Sie es von Ihrem node_modules zu kopieren:

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'bootstrap/dist/**/*', 
     ... 
    ] 
    } 
} 

Dann Ihre Referenz in Ihrer index.html wäre:

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

Answer 2

Da die Dateien auf Sie beziehen (dh [framework-x].css) sind statisch Sie th nutzen können e public Verzeichnis zum Kopieren von Dateien direkt in den Ordner dist ohne zusätzliche Konfiguration.

basierend auf Ihre Aufnahme von:

src 
|-- public 
| |-- framework-x.css 

Ihre Datei wird wie folgt auf die dist-Verzeichnis verschoben werden: direkt

dist 
|-- framework-x.css 

So können Sie es in index.html verweisen.

Answer 3

In der neuesten ng cli wie unten erforderlich Stile und Skripte Hinzufügen in „.angular-cli.json“ wird es in Bündel automatisch

"apps":{ 
"styles": [ 
     "../node_modules/ng2f-bootstrap/dist/bootstrap.min.css", 
     "styles.css" 
     ], 
    "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.js" 
     ], 
}