각형 2 구성 요소 스타일이 전체적으로 적용됩니다.

Question

해당 구성 요소에만 구성 요소 별 스타일을 사용하려고하지만 다른 모든 구성 요소에 사용되고 있습니다. 웹팩 설정이 있습니다. 다른 접근 방식을 시도했지만 예상대로 작동하지 않습니다. 누구든지이 사실을 알 수있게 도와 줄 수 있습니까? 웹팩 구성 :

/* 
    * 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'], 
    }, 

내 구성 요소 선언 :

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

Answer 1

이 같은 시도

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

내 응용 프로그램 구성 요소 선언 :

난 다음 위치에서 전역하는 SCS 파일이 :

SRC => 응용 프로그램 =>

body { 
    background: #000 !important; 
} 

app.component.global.scss

app.component.global.scss 그리고 난 다음 위치에 style.scss 파일이 :

style.scss

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

추가 각-cli.json의 스타일 배열 안에 당신의 style.scss

"styles": [ 
    "styles.scss" 
]