Angular library : use exported scss files from one module into other library modules

Question

EDIT :

I realized that my angular project folder (what I called "library") was not composed of several modules like utils or breadcrumb but that they were in fact libraries... So instead of import modules in my parent app, I imported libraries... Due to this point, it was normal I can't share things between my libraries like I asked to.

I've recreated ONE library with expected modules and now everything works like a charm : I succeed to share styles across all my library (by specifiing the path of my scss files), and from my library to parent app like explained below.

I am building an Angular library with couple of modules, all generated with command ng generate library <module-name>. One of these modules is utils and contains some methods, service and scss files. I was able to export the scss file thanks to this topic (see Orson's answer). In my case, scss files are located in module's root (on the same level as package.json).

ng-package.json of utils :

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/utils",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": ["styles.scss", "variables.scss", "components.scss"]
}

package.json of utils :

{
  "name": "utils",
  "version": "1.0.6",
  "peerDependencies": {
    "@angular/common": "^13.3.0",
    "@angular/core": "^13.3.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "exports": {
    "./ics-styles": {
      "sass": "./styles.scss"
    }
  }
}

When I build utils, I see styles.scss, variables.scss and components.scss files into dist folder.

In parallel, I have an Angular application (let's call it "parent app") which use many modules from the library :

Angular CLI: 13.3.5
Node: 18.12.1 (Unsupported)
Package Manager: npm 8.8.0
OS: win32 x64

Angular: 13.3.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router     

Package                         Version
---------------------------------------------------------  
@angular-devkit/architect       0.1303.5
@angular-devkit/build-angular   13.3.5
@angular-devkit/core            13.3.5
@angular-devkit/schematics      13.3.5
@angular/cdk                    13.3.7
@angular/cli                    13.3.5
@schematics/angular             13.3.5
ng-packagr                      13.3.1
rxjs                            7.5.5
typescript                      4.6.4

Parent app has a SharedModule which import UtilsModule. I am able to import and use scss from utils thanks to this import in scss files : @import 'utils/ics-styles';. It works perfectly, all variables and mixins from UtilsModule are available.

Now, I want to use exported scss files from UtilsModule into another module of the library, let's say BreadcrumbModule. I proceeded in the same way, importing UtilsModule in breadcrumb.module.ts :

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { UtilsModule } from 'utils';
import { BreadcrumbComponent } from './breadcrumb.component';

@NgModule({
  declarations: [BreadcrumbComponent],
  imports: [CommonModule, RouterModule, TranslateModule, UtilsModule],
  exports: [BreadcrumbComponent],
})
export class BreadcrumbModule {}

Then, in breadcrumb.component.scss, I use @import 'utils/ics-styles'; but it gives me the following error on serve or build :

./projects/breadcrumb/src/lib/breadcrumb.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'utils/ics-styles';
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  projects\breadcrumb\src\lib\breadcrumb.component.scss 1:9  root stylesheet



× Failed to compile.

I tried to change scss import with @import '~utils/ics-styles'; or @import '~@utils/ics-styles'; but got the same error message.

Any idea to make scss file from utils useable into other library modules would be appreciated. Thanks !

Angular library : use exported scss files from one module into other library modules

EDIT :

0 Answers0