在 Angular 2 组件中从 CDN 加载 css答案

【问题标题】：Load css from a CDN in an Angular 2 Component在 Angular 2 组件中从 CDN 加载 css
【发布时间】：2017-02-17 06:59:17
【问题描述】：

正如标题所说，我想在 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,，但没有帮助。

【问题讨论】：

标签： angular angular-components

【解决方案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";

【讨论】：

可能是版本不同，但是在 Angular 6 中，您必须将 URL 包装在 "url()";让它工作。

【解决方案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:'...' 或 template:'...'

【讨论】：