Angular-cli build generierte CSS funktioniert nicht

Question

Ich habe eine angular-cli App und verwende Webpack. Wenn ich versuche es die Komponente spezifische CSS zu laufen funktioniert nicht

styles.css

/* You can add global styles to this file, and also import other style files*/ 
@import 'http://something/v4/dist/css/bootstrap.min.css'; 

Komponente

@Component({ 
    selector: 'app-carousel', 
    templateUrl: './carousel.component.html', 
    styleUrls: ['./carousel.component.css'] 
}) 
export class CarouselComponent implements OnInit { 

Component CSS

.carousel-indicators { display: none; } 

Winkel cli.config

"styles": [ 
     "styles.css", 
     "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss", 
     "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-light.scss", 
     "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss"  
     ], 

Das gerenderte HTML

<style type="text/css">@import url(http://something/v4/dist/css/bootstrap.min.css);</style> 
<style type="text/css">/* You can add global styles to this file, and also import other style files */ 
</style><style></style><style>.carousel-indicators[_ngcontent-c5] { display: none; }</style> 

aber nicht zu meinem html-Element angewendet wird 'Karussell-Indikatoren' Wenn ich die carousel.component.css importieren in die styles.css dann funktioniert es aber es erscheint zweimal in der generierten html

Ich suche den richtigen Weg, dies zu tun

Answer 1

Standardmäßig (wie in Ihrem Fall) eckig mit ViewEncapsulation.Emulated, die Ihre CSS scopes. Allerdings gibt es 3 Ansicht Einkapselung Optionen in Eckig:

• india Ansicht Verkapselung verwendet den nativen Schatten DOM-Implementierung des Browsers (siehe Schatten DOM auf der MDN Website) einen Schatten DOM auf die Komponente der Host-Element zu befestigen, und fügt dann die Komponentenansicht in das Schatten-DOM ein. Die Stile der Komponente sind im Schatten-DOM enthalten.

• emulierten Ansicht Kapselung (Standardeinstellung) emuliert das Verhalten von Schatten DOM durch Vorverarbeitung (und Umbenennung) den CSS-Code effektiv Umfang der CSS der Ansicht der Komponente. Weitere Informationen finden Sie in Anhang 1.

• Keine bedeutet, dass Angular keine Einkapselung zeigt. Angular fügt das CSS den globalen Stilen hinzu. Die oben beschriebenen Scoping-Regeln, Isolierungen und Schutzmechanismen gelten nicht. Dies entspricht im Wesentlichen dem Einfügen der Stile der Komponente in den HTML-Code.

Also, wenn Sie alle mögliche Arten zu Ihrem component in component.css (mit ViewEncapsulation.Emulated Standard) Anwendung werden die Stile nur für diese bestimmte Komponente angewendet werden, wird es nicht außerhalb der Komponente geleckt werden und haben immer eine Priorität über die Globale Stile, sofern der globale Stil nicht !important ist.

So als Ergebnis haben Sie den Stil in dem Kopf Ihrer HTML-Datei wie:

<style>.carousel-indicators[_ngcontent-c5] { display: none; }</style> 

Wenn Sie Ihren component.css in styles.css dann Referenzierung wird ein globaler Stil in html Kopf wie so gemacht werden:

<style type="text/css">/* You can add global styles to this file, and also import other style files */ 
.carousel-indicators { 
    display: none; } 
</style> 

Wie Sie Sie Stil in competent deklariert und referenziert dann component.css in styles.css dass competent Arten wird in Ihrem hTML nur verdoppelt: eine Kopie ist ein globales s Tyle and Other Copy ist ein Bereichstyp für Bereiche.

Ich wurde versucht, Sie Problem zu replizieren, aber meine compentnt.css wird immer angewendet wird. Ich verwende den neuesten stabilen Winkel cli 1.3.2. Wenn Sie ältere CLI verwenden, versuchen Sie zu aktualisieren. Ansonsten drücke deinen Code auf GitHub oder erstelle einen Plunder, damit ich einen Blick darauf werfen kann.

UPDATE: Sie könnten Ihre benutzerdefinierte css wird von einigen Ihrer globalen Stylesheets überschrieben werden Sie verweisen. Sie können Chrome-Dev-Tools verwenden, um die Stile zu debuggen. Sie können auch versuchen, !important auf Ihre benutzerdefinierte css setzen und sehen, ob es hilft.

Answer 2

Für alle Landung hier:

Das Problem mit den ViewEncapsulation.Emulated war ich es ViewEncapsulation.None geändert, wie in dieser Stackoverflow Antwort beschreiben:

how to hide ngb-carousel indicators and prev-next control

Danke für Ihre Hilfe