How to maintain module level theme mixins css files while creating angular library?

Question

I am creating angular library which exposes most of the feature modules along with global css.

The global CSS file again imports CSS files which contains theme mixins for each modules as follows: global.scss

 @use '@angular/material' as mat;
 @use '../../moduleA/wizard-theme';
 @use '../../moduleB/button-theme';

The library is getting compiled and published properly but problem while building another angular application using same library

Since these module level theme css file are not available in src code it fails to resolve paths. So please suggest, how I can solve this problem. Do I need to copy all these module level css as part of library export?

Answer 1

You could take reference to the angular material library, tsconfig.json, they have added paths, which we use in the application to import the CSS. Usually we should create a barrel file called, index.scss which contains all the imports which resolve easily.

tsconfig.json

"baseUrl": ".",
"paths": {
  "@angular/cdk": ["../cdk"],
  "@angular/cdk/*": ["../cdk/*"],
  "@angular/material/*": ["./*"]
}