Angular 2 구성 요소의 CDN에서 CSS를로드하십시오.

Question

제목에서 말하자면, 저는 Angular 2 구성 요소에 외부 CSS를 포함하고 싶습니다. 다음은 현재 수행중인 작업입니다.

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-auth', 
    templateUrl: './auth.component.html', 
    styleUrls: [ 
     'https://fonts.googleapis.com/css?family=Dosis:400,500,600,700', 
     'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', 
     './assets/css/bootstrap.min.css', 
     './assets/css/main.css', 
     './assets/css/responsive.css', 
     './auth.component.css', 
    ], 
}) 
export class AuthComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

처음 두 URL은 작동하지 않습니다. 나는 오류를 받고 있어요 :

ncaught Error: Cannot find module "./https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"

나는 그것이 HTML에 직접 포함하여 작동 할 수 있습니다,하지만 난 그게 옳은 방법이라고 생각하지 않습니다.

편집 : 심지어 도움이되지 않은 encapsulation: ViewEncapsulation.None,을 사용해 보았습니다.

Answer 1

styleUrls 배열에 로컬 스타일 만로드해야합니다. 따라서, auth.component.css에, 원하는 외부 스타일 시트를 가져옵니다 templateUrl와 대조적으로

@import "https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"; 
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; 

Answer 2

이 styleUrls가 상대적으로 정의 할 수 있습니다 것으로 보인다.

그 문제에 대한 해결책은 일부 CSS 코드에서 절대 외부 글꼴이나 CSS 종속성을로드하는 것입니다 그리고 당신은 다음과 같이 인라인 스타일 @Component 내부 CSS 코드의 조각을 넣어 수 :

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-auth', 
    templateUrl: './auth.component.html', 
    styles: [' 
     @import "https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"; 
     @import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; 
    '], 
    styleUrls: [ 
     './assets/css/bootstrap.min.css', 
     './assets/css/main.css', 
     './assets/css/responsive.css', 
     './auth.component.css' 
    ], 
}) 
export class AuthComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

원하는 경우 스타일 내에서 상대적 종속성을 전송할 수 있습니다. [...] 각 항목을 @import로로드하십시오. 참고 : [...] + styleUrls : [...] 조합 스타일을 사용하는 동안 templateUrl 만 사용할 수 있습니다. '...'또는 템플릿 : '...'