如何发布css？

Question

我正在使用第三方库，这显然迫使我在我的chord-diagram.component.css中放入一些css。所以基本上我有我的组件：

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;
  }
}

和我的模板：

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

所以现在有一些用于可视化的css，它在target中显示，但我必须把它放到我的chord-diagram.component.css中。问题似乎是，如果我把CSS放到chord-diagram.component.css中，CSS并没有正确地限定到target后面的可视化的范围，因为它没有得到正确的应用。我想知道这是不是第三方库应该如何执行CSS的方式？在这种情况下，发送样式的常见方式是什么？强迫我将他们的CSS复制到我的应用程序中是不合适的。

Answer 1

如果你碰巧在使用angular cli，你可以更新你的.Angular-cli.json的样式数组来包含你的第三方css。例如，在本例中，我可以使用以下方法拉入prismjs的css：

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