从Angular 2组件中的CDN加载CSS
正如标题所说,我想在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() {
}
}
前两个URL不起作用.我遇到错误:
The first two URLs don't work. I'm getting an error:
ncaught Error: Cannot find module "./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";