angular-cli Wie füge ich globale Styles hinzu?

Question

Ich habe eine globale Stylesheet mit Sass erstellt und es in die public/style/styles.scss. Ich gebe nur eine Hintergrundfarbe an.

In dem Index hinzugefügt ich einen Link zu ihr: <link rel="stylesheet" href="style/styles.css">

Die Hintergrundfarbe auf dem Body-Tag funktioniert nicht. Nach der Überprüfung der Body-Tag kann ich sehen, dass die Hintergrundfarbe angewendet wurde, aber von scaffolding.less:31

überschrieben. Was mache ich falsch?

Vielen Dank im Voraus

Answer 1

Ab der Beta.14-Version der CLI (die Angular 2.0 final verwendet) kann ein globales Stylesheet innerhalb von angular-cli.json unter dem Schlüssel "Styles" verknüpft werden. Dies ist ein Verweis auf eine Datei, die sich auf das Verzeichnis src/ bezieht, das standardmäßig ist.

diese Methode Nutzung könnten Sie:

• Kopieren Sie die globalen Stile in src/styles.css
• Verwenden CSS Importe externen Regeln in styles.css
• hinzufügen Weitere globale Stile über die apps[0].styles Eigenschaft importieren in angular-cli.json

Siehe auch Global Styles in angular-cli 's Wiki.

Answer 2

ich hatte das gleiche Problem und fand this example aus, bevor es sogar sass/weniger Unterstützung in der cli war. Ich nehme an, dass der aktuelle Build des CLI (1.0.0-Beta.5) nur die Komponentenebene sass kompiliert und möglicherweise sogar .css im Ordner/src ignoriert. Ich habe es geschafft, globale * .css in den public/Ordner zu legen und sie nach/dist kopieren zu lassen, konnte aber nicht das gleiche Verhalten von/src bekommen und Präprozessoren scheinen nicht standardmäßig zu kompilieren. Ich nehme an, dass das von Design und IMHO etwas kontraintuitiv sein könnte. Angular cli ist glücklicherweise auf Brokkoli aufgebaut und es lohnt sich, die Zeit und Mühe zu lernen, wie man den Build mit Brokkoli wie im folgenden Beispiel anpasst:

Hier ist eine Kopie des angular-cli-build. js ich endete mit.

'use strict'; 
/* global require, module */ 

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 
var compileSass = require('broccoli-sass'); 
var mergeTrees = require('broccoli-merge-trees'); 
var _ = require('lodash'); 
var glob = require('glob'); 

module.exports = function(defaults) { 

    let sourceDir = 'src'; 
    let app = new Angular2App(defaults, { 
     sourceDir: sourceDir, 
     sassCompiler: { 
     includePaths: [ 
      'src/style' 
     ] 
     }, 
     vendorNpmFiles: [ 
     'systemjs/dist/system-polyfills.js', 
     'systemjs/dist/system.src.js', 
     'zone.js/dist/*.js', 
     'es6-shim/es6-shim.js', 
     'reflect-metadata/*.js', 
     'rxjs/**/*.js', 
     '@angular/**/*.js' 
     ] 
    }); 
    let styles = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) { 
     sassFile = sassFile.replace('src/', ''); 
     return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css')); 
    })); 
    return mergeTrees([app, styles], { overwrite: true }); 
}; 

Answer 3

Ich habe die folgende Strategie wurde verwendet (obwohl ich keine offiziellen Lösungen auf diesem von dem Winkel cli Team gesehen habe, so kann es da draußen eine bessere Methode sein):

Wenn alle meine src-dateien sind in src/app/..., ich lege eine app.scss-datei im root./app-verzeichnis. Dass dann kompiliert wird automatisch mit dem aktuellen Build-Konfiguration CSS, also kann ich es in meiner index.html als solche umfassen:

<link rel="stylesheet" type="text/css" href="app/app.css"> 

Wenn Ihre Dateistruktur unterscheidet sich aus irgendeinem Grund aus der Dateistruktur Standard-CLI, nur Stellen Sie sicher, dass die app.scss-Datei in demselben Verzeichnis enthalten ist, in dem sich auch Ihre Hauptanwendungskomponente befindet. Ich mag diese Technik, weil es bedeutet, dass ich den Build nicht ändern muss, was es weniger schmerzhaft macht, das Projekt in Zukunft zu aktualisieren.

Answer 4

Während ich denke @filoxo's answer ist die dokumentierte Lösung, so etwas wie die folgenden Werke für mich auch, und vielleicht macht es klar, welche Komponente es braucht:

require('style!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss'); 

Oder wenn neuere Versionen von Angular CLI :

require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss'); 

Oder:

@Component({ 
    selector: 'my-component', 
    styles: [require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss')], 
    styleUrls: ['./my.component.scss'] 
}) 

Letzteres ist möglicherweise nicht erlaubt; vielleicht sollte man styles und styleUrls nicht bereitstellen, da ich bekomme "Ein Objektliteral kann nicht mehrere Eigenschaften mit dem gleichen Namen im strikten Modus haben" und "Duplicate Identifier 'Stile'".

Answer 5

Fügen Sie scss zu Stilen Array von angular-cli.json hinzu.

Answer 6

Ich weiß, das ist zu spät, aber da die Dinge sich ändern. Ab dem 16. März 2017

dies funktionierte für mich für den CLI.

<link rel="stylesheet" href="src/styles.css"> 

Answer 7

nur src/styles.css zu src/styles.scss

styles.css umbenennen erinnern umbenennen auch im .angular-cli.json styles.scss.