从 Angular 2 组件中的 CDN 加载 css [英] Load css from a CDN in an Angular 2 Component

问题描述

正如标题所说，我想在 Angular 2 组件中包含外部 css.这是我现在的做法:

As the title says, i want to include external css in an Angular 2 component. Here's how i am doing it now:

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() {
    }

}

前两个网址无效.我收到一个错误:

The first two URLs don't work. I'm getting an error:

捕获错误:找不到模块./https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"

我可以通过将其直接包含到 HTML 中来使其工作，但我认为这不是正确的方法.

I can make it work by including it directly into the HTML, but i don't think that's the right way to do it.

我什至尝试使用 encapsulation: ViewEncapsulation.None, 没有帮助.

I even tried using encapsulation: ViewEncapsulation.None, that didn't help.

推荐答案

您应该只加载 styleUrls 数组中的本地样式.因此，在 auth.component.css 中，导入所需的外部样式表:

You should load only local styles in the array of styleUrls. Therefore, in auth.component.css, import your desired external stylesheets:

@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 2 组件中的 CDN 加载 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！