Home Importing a css stylesheet in a module
Reply: 2

Importing a css stylesheet in a module

dave0688
1#
dave0688 Published in 2017-12-07 16:05:16Z

I'm publishing a module on NPM. In that module I have several components, which use ngx-bootstrap/datepicker. That requires a certain stylesheet imported out of node_modules.

Now the problem is: I can't find a way to import that stylesheet for that module.

There are two solutions I have found:

  1. Import the stylesheet in the global styles.css of the application (or in angular-cli.json)
  2. Import the stylesheet in every component of my module

The problems are: I would like to avoid the first solution, since I would like my module to work out of the box when imported. The second solution does not work, I think it has something to do with the scope. Even if it would work, it's a dirty solution, since I have to import the file in every component where I need it.

Does anyone have a solution for that problem?

Raghu M U
2#
Raghu M U Reply to 2017-12-15 12:54:49Z

If you are using Angular CLI, this is as simple as including one line in your component.css file and this must work.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
valorkin
3#
valorkin Reply to 2017-12-17 17:24:29Z

Importing styles into module or components forces style emulation and scoping of styles, which affects app performance and makes hard to override your styles.

If you provide additional styles users of your lib should include your css the same way as they include bootstrap.css

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.310803 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO