如何在Angular 2中加載外部CSS？

我想要的「5分鐘快速入門」使用一些外部CSS爲我的組件如何在Angular 2中加載外部CSS？

這是我試過（以下this example）：

import { Component } from '@angular/core'; 
import { ViewEncapsulation } from '@angular/core'; 


@Component({ 
    selector: 'my-selector', 
    templateUrl: 'app/shared/my.component.html', 
    styleUrls: ['https://example.com/themes/default/style.css'], 
    encapsulation: ViewEncapsulation.None, 
})

在檢查代碼plnkr

樣式不適用於我的組件，當從「開發人員工具」中檢查「Sources」時，外部CSS中的images/fonts /似乎沒有加載。有什麼，我失蹤了？

來源

2016-08-22 Gerald Hughes

其中角版本您使用的？嘗試在你的組件中設置'moduleId：module.id' – candidJ

@candidJ我正在使用RC5，我試圖在組件中添加moduleId：module.id，我有相同的行爲 –

export function isStyleUrlResolvable(url: string): boolean { if (isBlank(url) || url.length === 0 || url[0] == '/') return false; var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url); return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset'; }

似乎對URL方案，將返回false。

的解決方案是使用一個本地的css文件和剛剛導入外部CSS，就像這樣：

@import url("https://example.com/themes/default/style.css");

來源

2016-08-22 12:02:06

如何在Angular 2中加載外部CSS？

回答

相關問題