Question

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

}

前两个网址不起作用。我收到了错误：

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

我可以直接将其包含在HTML中，但我不认为这是正确的方法。

编辑：我甚至尝试使用没有帮助的encapsulation: ViewEncapsulation.None,。

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

Answer 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：＆＃39; ...＆＃39;或模板：＆＃39; ...＆＃39;

从Angular 2组件中的CDN加载css

2 个答案: