angular - Include external CSS in an Angular library

Question

I'm creating an Angular library that needs to use tippy.js. Basically, I'm creating a wrapper of it. I know that packages to do so already exist, but I'm doing it for learning purposes.

For now, the directive is really simple:

import { Directive, ElementRef, OnInit } from '@angular/core';
import tippy from 'tippy.js';

import 'tippy.js/dist/tippy.css';

@Directive({
  selector: '[tooltip]'
})
export class TooltipDirective implements OnInit {

  constructor(private _element: ElementRef) { }

  public ngOnInit(): void {
    tippy(this._element.nativeElement, { content: this._element.nativeElement.getAttribute('tooltip'), arrow: true });
  }

}

It works, but the issue is that I don't get the styling of the tooltip. I guess referencing it via an import like this is not the way to go. Note that I have different components in the library, all included in different modules and I'd like the CSS of tippy.js to be imported only where I import the module containing my directive.

I don't really know where and how I'm supposed to import my CSS in a clean way.

Any advices?

标签： angularangular-library

Answer 1

添加@import '~tippy.js/dist/tippy.css';到根目录下的style.css