如何在 Angular 2 中加载外部 CSS？答案

【问题标题】：How to load external CSS in Angular 2?如何在 Angular 2 中加载外部 CSS？
【发布时间】：2016-12-28 19:31:47
【问题描述】：

我正在尝试在“5 分钟快速启动”上为我的组件使用一些外部 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上的代码

样式不适用于我的组件，在从“开发者工具”检查“源”时，外部 CSS 中的图像/字体/似乎也没有加载。有什么我遗漏的吗？

【问题讨论】：

您使用的是哪个版本的 Angular？尝试在您的组件中设置moduleId : module.id
@candidJ 我正在使用 RC5，我尝试在组件中添加 moduleId : module.id，我有相同的行为

标签： angular styles

【解决方案1】：

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");

【讨论】：