從角度2組件中的CDN加載css

Question

正如標題所說，我想將外部css包含在Angular 2組件中。以下是我現在這樣做的：

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，導入所需的外部樣式表：

@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

與templateUrl相比之下似乎styleUrls只能相對確定。

解決這一問題將是從一些CSS代碼加載您絕對外部字體或CSS的依賴，你可以把這段CSS代碼內@Component在內嵌樣式是這樣的：

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：'...'或模板：'...'