css - Angular 5 自定义组件 CSS

Question

我有一个 CSS 文件，我只想在页面上有组件时加载它。

我尝试了以下方法:

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styles: [
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
    ],
})

但是没有任何运气。有谁知道这样做的方法吗？

编辑

所以我试图按照下面的答案

这是我的文件夹结构:

我的组件现在看起来像这样:

import {Component, OnInit} from '@angular/core';

declare var Reveal: any;

@Component({
    selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: ['./templates/testview.css'],
})
export class TestviewComponent implements OnInit {

    constructor() {
    }


    ngOnInit() {
        Reveal.initialize({});
    }

}

我的 testview.css 文件如下所示:

    @import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");

Answer 1

你必须在样式数组中的 url 中:styleUrls instead of styles

所以

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: [
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
        "../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
    ],
})

编辑:

@Component({
  selector: 'testview-testview',
    templateUrl: './templates/testview.html',
    styleUrls: ['./templates/testview.css'

    ],
})

在你的 css ./templates/testview.css 导入文件

@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
@import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");