从Angular 2组件中的CDN加载css

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

正如标题所说,我想在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() {
    }

}

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

前两个URL不起作用。我收到一个错误:

ncaught Error: Cannot find module "./https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"

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

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.

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

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

编辑:我甚至尝试使用封装:ViewEncapsulation.None,这没有帮助。

2 个解决方案

#1

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

您应该只在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";

#2

In contrast with templateUrl It seems that styleUrls can only be defined relatively.

与templateUrl相比,似乎styleUrls只能相对定义。

A solution to that problem would be to load your absolute external fonts or CSS dependencies from some css code and you could put this piece of css code inside @Component in the inline styles like this:

解决这个问题的方法是从一些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() {
    }

}

If you wish you can transfer your relative dependencies inside styles:[...] and load each of them with a @import. Note: while using the combination styles:[...] + styleUrls:[...] works fine, you can only use templateUrl:'...' or template:'...'

如果您希望可以在样式中传递相对依赖项:[...]并使用@import加载每个样式。注意:使用组合样式时:[...] + styleUrls:[...]工作正常,你只能使用templateUrl:'...'或模板:'...'

#1