sass - Dynamically set styleUrls inside the component of an angular 11 library based on value passed from the app which uses the library

Question

I created an Angular 11 library for reusable frontend controls. I would like to use different sass stylesheets for the same component based on the value passed from the app that uses the library. The folder structure of my library project is shown below

The code inside cw-radiobutton.component.html is

    <div class="radio">
        <label class="bg-color"><input type="radio" name="{{group}}"> {{text}}</label>
    </div>

The code inside cw-radiobutton.component.ts is

     import { Component, OnInit, Input } from '@angular/core';
     declare var require: any

     @Component({
       selector: 'cw-radiobutton',
       templateUrl: './cw-radiobutton.component.html',
       styleUrls: ['./cw-radiobutton.component.scss']
     })
     export class CwRadiobuttonComponent implements OnInit {
 
     constructor() { }

     @Input() group!: string;
     @Input() text!: string;
     @Input() bgColor!: string;

     ngOnInit(): void {
       if(this.bgColor == "theme-green") {
          require("style-loader!../scss/style1.scss");
       } else {
          require("style-loader!../scss/style2.scss");
       }
     }

    }

I am building the above library using the command ng build cw-component-lib --prod and also running the command npm link inside dist/cw-component-lib folder where build files are there.

There is another angular 11 app which I created and I am trying to use the above library and run the app locally. The code in the app.component.html file inside the app is

    <cw-radiobutton group="confirmradio" text="Yes" bgColor="theme-green">
    </cw-radiobutton>

In this app I am running the command npm link cw-component-lib and then running ng serve to run the app locally. I am getting following errors

Error: ../cw-lib-workspace/dist/cw-componentlib/ivy_ngcc/fesm2015/cw-component-lib.js Module not found: Error: Can't resolve '../scss/style1.scss' Error: ../cw-lib-workspace/dist/cw-componentlib/ivy_ngcc/fesm2015/cw-component-lib.js Module not found: Error: Can't resolve '../scss/style2.scss'**

I followed the instructions in this link https://github.com/angular/angular-cli/issues/4685 but couldn't get it working. I could not find out what is causing this issue. Please help me out with this.

question from:https://stackoverflow.com/questions/65660660/dynamically-set-styleurls-inside-the-component-of-an-angular-11-library-based-on

Answer 1

Waitting for answers