Question

我正在使用第三方lib，这显然迫使我在我的css中添加了一些chord-diagram.component.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中。问题似乎是，如果我将target放入chord-diagram.component.css后面的CSS可能没有正确应用，那么它的范围不正确。我想知道这是第三方lib应该如何强制执行CSS的方式？在这种情况下运送样式的常用方法是什么？迫使我将他们的CSS复制到我的应用程序中是不对的。

Answer 1

如果你碰巧使用的是角度cli，你可以更新.angular-cli.json的样式数组以包含你的第三方css。例如，在这种情况下，我能够使用这种方法拉入prismjs的css：

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

如何运送CSS？

1 个答案: