Load css files from node_modules into an Angular component having webpack

Question

I have two modules: FrontUI & AdminUI. The FrontUI is the root module and the AdminUI is lazy loaded.

In the Admin section, I need to load few .css files that are different from the FrontUI and is particular to admin section only. I tried the following -

1. I have added these .css file path in angular.json as shown below and this works. But this will bundle these files during startup, which is not proper

"styles": [
              "node_modules/@xyzPlugIn/base.css",
              "node_modules/@xyzPlugIn/theme.css"
            ],

2. I have added the .css file path in component.ts file as follows, but this is not rendering the css

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['../node_modules/@xyzPlugIn/base.css',
              '../node_modules/@xyzPlugIn/theme.css']
})

Can different styles be loaded for two separate modules, as the client/users are different? In production environment, can these files be bundled?

P.S: The project structure I have mentioned is short for better understanding.

Answer 1

Thank you Jonathan Hamel.

I achieved by doing the following:

admin.component.ts

@Component({...
  styleUrls: ['./admin.component.css'],
  encapsulation: ViewEncapsulation.None
})

admin.component.css

@import "~@xyzPlugIn/base.css";
@import "~@xyzPlugIn/theme.css";

1. Adding tilde '~' represents the node_module in Angular.
2. Set encapsulation to ViewEncapsulation.None so that its sub components can also apply this style.