CODEWITHSUNDEEP
cssangular
Marc Rasmussen
Marc Rasmussen

Reputation: 20565

Angular 5 custom component CSS

I have a CSS file I ONLY want to be loaded when a component is on the page.

I have tried the following:

@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"
    ],
})

However without any luck. Does anyone know of a way to do this?

EDIT

So i am attempting to follow the answer below

Here is my folder structure:

enter image description here

My Component now looks like this:

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

}

And my testview.css file looks like this:

    @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");

Upvotes: 0

Views: 88

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16261

You have to inside the urls inside array of styls: styleUrls instead of styles

SO

@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"
    ],
})

EDIT:

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

    ],
})

in you css ./templates/testview.css import files

@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");

Upvotes: 1

Related Questions