CODEWITHSUNDEEP
javascriptcssangular
tschaka1904
tschaka1904

Reputation: 1489

How to ship css?

I'm using a third party lib, which apparently forces me put some css in my chord-diagram.component.css. So basically I have my component: 

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

const Circle = require('chord'); //third party lib
const Model = require('model');  //third party lib

@Component({
  selector: 'chord-diagram',
  templateUrl: './chord-diagram.component.html',
  styleUrls: ['./chord-diagram.component.css'],
})
export class ChordDiagramComponent implements OnInit {
  private _JSON: string;


  constructor() {
  }

  ngOnInit() {
    let circle;
    new Model(this._JSON).load().then(function (m) {
      circle = new Circle('#target', m);
      // console.log('circle', circle);
    });
  }

  @Input()
  set JSON(value: any) {
    this._JSON = value;
  }
}

And my template: 

<div style="width: 500px; height: 500px" id="target"></div>

So now there is some css for the visualisation, which gets shown in target, but I've to put it into my chord-diagram.component.css. The problem seem to be that the CSS is not rightly scoped to the visualisation behind the target if I put it into the chord-diagram.component.css, as it is not properly applied. I wonder if this is the way how third party lib should enforce CSS? What is the common way to ship your styles in such cases? It just doesn't feel right to force me to copy their CSS into my application.

Upvotes: 0

Views: 96

Answers (1)

seescode
seescode

Reputation: 2131

If you happen to be using angular cli you can update your .angular-cli.json's styles array to include your third party css. For example in this case I was able to pull in prismjs's css using this method:

{
  "apps": [
    {
      "styles": [
        "styles.css",
        "../node_modules/prismjs/themes/prism.css",
        "../node_modules/prismjs/themes/prism-okaidia.css"
      ]
    }
  ]
}

Upvotes: 1

Related Questions