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 -

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"
            ],

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.

You can add an import at the top of your component import '@xyzPlugIn/base.css';. If you use scss, add @import "~@xyzPlugIn/base"; to your stylesheet. Also, are your sure your relative path to node_modules is right ? — Jonathan Hamel
– Jonathan Hamel, Commented Mar 26, 2019 at 13:11
I tried with import, @import in component but it doesn't work for .css files. Yes, the relative path is correct in my project. — Bibin
– Bibin, Commented Mar 27, 2019 at 8:03
@import will be in your stylesheet (without extension and tilde at beginning). import will be in your component (with .css extension). I have used both at several occasions. — Jonathan Hamel
– Jonathan Hamel, Commented Mar 27, 2019 at 12:59

Bibin · Accepted Answer · 2019-03-28 10:42:19Z

21

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";

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

answered Mar 28, 2019 at 10:42

Bibin

5734 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mick Over a year ago

Just wanted to mention that ViewEncapsulation.None is a bad thing and breaks the principles of component styles.

Alexander Over a year ago

If the component is a part of Angular library and I publish it - this path does not work correct, because the css are sought in app root instead of node_modules: https://localhost:4200/~@xyzPlugIn/base.css

Collectives™ on Stack Overflow

Load css files from node_modules into an Angular component having webpack

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related