Angular 2-Komponenten-Stil wird global angewendet

Question

Ich versuche, komponentenspezifischen Stil nur für diese Komponente zu verwenden, aber es wird in allen anderen Komponenten verwendet. Ich habe ein Webpack-Setup. Ich habe einen anderen Ansatz versucht, aber es funktioniert nicht wie erwartet. Kann mir jemand helfen, das herauszufinden? Webpack Konfiguration:

/* 
    * to string and css loader support for *.css files 
    * Returns file content as string 
    * 
    */ 
    { 
     test: /\.css$/, 
     use: ['to-string-loader', 'css-loader'] 
    }, 
    /* 
    * to string and css loader support for *.css files 
    * Returns file content as string 
    * 
    */ 
    { 
     test: /\.(scss|sass)$/, 
     use: ['to-string-loader', 'style-loader', 'css-loader', 'sass-loader'], 
    }, 

Meine Komponentendeklaration:

@Component({ 
    selector: 'outbreak-visualization', 
    templateUrl: './outbreak-visualization.component.html', 
    styleUrls: ['./outbreak-visualization.component.scss'] 
}) 

Meine app Komponentendeklaration

@Component({ 
    selector: 'app', 
    encapsulation: ViewEncapsulation.None, 
    styleUrls: [ 
    './app.component.global.scss' 
    ], 
    template: `..... 

Answer 1

wie Try this:

i in der folgenden Position global SCSS Datei :

src => app => app.component.global.scss

app.component.global.scss

body { 
    background: #000 !important; 
} 

und ich habe style.scss Datei in der folgenden Position:

style.scss

@import "src/app/app.component.global.scss"; 

add Ihre style.scss innerhalb des Arrays Stile in Winkel cli.json

"styles": [ 
    "styles.scss" 
]