CODEWITHSUNDEEP
cssangularthemesmixinsangular-library
Prashant Biradar
Prashant Biradar

Reputation: 323

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

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?

Upvotes: 1

Views: 26

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

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/*": ["./*"]
}

Upvotes: 1

Related Questions