How to add scss of Angular library to bundle using ng-packagr?

Question

I am trying to create scss theming based Angular(ng 11) library which I will use in separate projects through private npm registry. Right now I am trying to add a global scss file into my library and bundle it with my library.

What I want:

let's say I keep my scss in projects/my-lib/src/styles/_material.scss:

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

I want my bundle(library package) to contain this scss so that after installing this library app can import that into their global style.scss file.

projects/my-app/src/style.scss

@import 'my-lib/_material.scss'

What I did:

I followed this documentation from angular Managing assets in library

library package.json (for the sake of simplicity I kept scss file outside src folder right now):

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "ui-sdk",
  "version": "0.0.1",
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/material.scss"
    ],
    "lib": {
      "entryFile": "src/public-api.ts"
    }
  },
  "peerDependencies": {
    "@angular/common": "^9.0.6",
    "@angular/core": "^9.0.6",
    "tslib": "^1.10.0",
    "ng-packagr": "^11.2.4"
  },
  "dependencies": {
  }
}

After doing these changes I am facing 2 problems:

1. ng build is adding library bundle under "projects/my-lib/dist"
2. library bundle does not contain library folder (my-lib) therefore not able to resolve the path.

Can someone explain a way how we can create a library where I can add material theming and app which extend those themes can use the theme? I have tried official docs as well as other sources but not reached a solution.

Any help or reference would be very much appreciated!

Answer 1

To get hold of your theme SCSS file from your importing application you will need to;

Create the SCSS theme file (which you've already done)

Copy over the SCSS asset using the ng-package.json file

{
  ...
  "assets": [
    "./src/styles/_material.scss"
  ]
  ...
}

Export a virtual access path (relative to your library name) in package.json

{
  ...
  "exports": {
    "./theming": {
      "sass": "./src/styles/_material.scss"
    }
  }
  ...
}

Import theme file from importing/consuming application

@import "~@my-lib/theming";

Answer 2

I have faced similar issue with ng-packagr. I have not yet found a right way to do it but the workaround is you can simply copy the .scss file manually to the final build. You can use ncp - Asynchronous recursive file & directory copying to copy the file to final build.

after the final build command just add && ncp currentpathOfSCSSFile destinationPathOfFinalBuildDistFolder

Just a workaround, but it will resolve this issue ;)