7

タイトルの通り、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() {
    }

}

最初の 2 つの URL は機能しません。エラーが発生します：

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

HTMLに直接含めることで機能させることができますが、それが正しい方法だとは思いません。

編集：私もそれを使用しようとしencapsulation: ViewEncapsulation.None,ましたが、役に立ちませんでした。

4

2 に答える 2

14

の配列には、ローカル スタイルのみをロードする必要があります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";
于 2016-10-08T11:49:28.683 に答える
7

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

}

必要に応じて、styles:[...] 内で相対的な依存関係を転送し、それぞれを @import でロードできます。注: styles:[...] + styleUrls:[...] の組み合わせを使用しても問題なく動作しますが、templateUrl:'...' または template:'...' のみを使用できます。

于 2016-10-08T12:50:44.697 に答える