Angular库中按需引入tippy.js外部CSS的正确方式咨询

Hey there! I totally get where you're coming from—building a custom Angular library for learning is such a great way to deepen your understanding, even if existing packages exist. Let's tackle that CSS loading issue you're facing.

The problem with directly importing tippy.js/dist/tippy.css in your directive is that Angular library bundling (via ng-packagr) doesn't handle top-level CSS imports in TypeScript files the same way regular Angular apps do. Those imports often get ignored during the library build process.

Here are the standard and reliable ways to load tippy.js CSS only when your tooltip module is imported:

1. Bundle CSS with Your Library (Recommended Approach) #

This method uses Angular's official library tooling to ensure styles are properly packaged and easy for consumers to load:

Step 1: Create a dedicated styles file #

In your library's src/lib folder, create a file like tooltip-styles.scss and add the import for tippy's CSS:

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

Step 2: Configure ng-packagr to include the styles #

Open your library's ng-package.json file and add the styles property under the lib section:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library-name",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styles": [
      "src/lib/tooltip-styles.scss"
    ]
  }
}

This tells ng-packagr to bundle this stylesheet into your library's output.

Step 3: Let consumers import the styles #

When users import your TooltipModule in their Angular app, they just need to add this line to their global styles file (like styles.scss):

@import 'your-library-name/tooltip-styles';

This ensures the tippy CSS is only loaded when your module is actually used in their project.

2. Embed Styles Directly in Your Module #

If you want to make it even more seamless for consumers (so they don't have to manually import styles), you can include the tippy CSS directly in your module's styles array:

import { NgModule } from '@angular/core';
import { TooltipDirective } from './tooltip.directive';

@NgModule({
  declarations: [TooltipDirective],
  exports: [TooltipDirective],
  styles: [
    `@import 'tippy.js/dist/tippy.css';`
  ]
})
export class TooltipModule { }

ng-packagr will bundle these styles into your library's output, and when consumers import your module, the styles will be automatically included in their app's bundled CSS (assuming they're using Angular's standard build process).

Just make sure your library's tsconfig.lib.json has these settings enabled to handle CSS imports:

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  }
}

3. Dynamic CSS Loading (Fallback Option) #

If the above methods don't work for your use case, you can dynamically load the tippy CSS in your directive, ensuring it only loads once:

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

@Directive({ selector: '[tooltip]' })
export class TooltipDirective implements OnInit {
  // Track if CSS is already loaded to avoid duplicates
  private static cssLoaded = false;

  constructor(private _element: ElementRef) { }

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

  private loadTippyCss(): void {
    if (!TooltipDirective.cssLoaded) {
      const link = document.createElement('link');
      // Note: You may need to adjust the href path depending on your build setup
      link.href = 'tippy.js/dist/tippy.css';
      link.rel = 'stylesheet';
      document.head.appendChild(link);
      TooltipDirective.cssLoaded = true;
    }
  }
}

⚠️ Heads up: This method can have path issues in production builds (if the tippy CSS path changes), so it's best used as a fallback rather than the primary solution.

Why Your Original Import Didn't Work #

Angular libraries are built to be reusable packages, and ng-packagr (the tool that builds Angular libraries) doesn't process CSS imports in TypeScript files by default. Those imports are treated as side effects but aren't included in the final library bundle, which is why your tippy styles weren't showing up.

内容的提问来源于stack exchange，提问作者ssougnez