从 Angular 2 组件中的 CDN 加载 css

2024-03-03

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


您应该仅加载数组中的本地样式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";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 Angular 2 组件中的 CDN 加载 css 的相关文章