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?

Linden X. Quan · Accepted Answer · 2020-09-14 22:45:33Z

1

add @import '~tippy.js/dist/tippy.css'; to style.css under root directory

answered Sep 14, 2020 at 22:45

Linden X. Quan

8708 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zargham Khan Over a year ago

should be without ~

Linden X. Quan Over a year ago

without ~ it implies ./tippy.js with ~ it implies ./node_modules/**/tippy.js

Collectives™ on Stack Overflow

Include external CSS in an Angular library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related