Import css file into component

Question

I am using ngx-bootstrap and I need to import one css file into my component, like this:

Load it from node_modules/ngx-bootstrap/datepicker/bs-datepicker.css via package bundler like Angular CLI, if you're using one.

(this is on component's documentation).

I don't know how to load the bs-datepicker.css via package bundler.

What I have tried is:

On my component, I tried to load:

styleUrls: ['node_modules/ngx-bootstrap/datepicker/bs-datepicker.css']

(no success, this wasn't found).

The file is in this directory:

C:\DEV\senai-5s-webapp\node_modules\ngx-bootstrap\datepicker\bs-datepicker.css

Are you using angular-cli?

David
– David

2018-02-26 15:09:56 +00:00
Commented Feb 26, 2018 at 15:09 — David
– David, Commented Feb 26, 2018 at 15:09
Yes, I am using! @David

Guilherme Nass
– Guilherme Nass

2018-02-26 15:10:55 +00:00
Commented Feb 26, 2018 at 15:10 — Guilherme Nass
– Guilherme Nass, Commented Feb 26, 2018 at 15:10

Francesco Borzi · Accepted Answer · 2018-02-26 15:22:02Z

7

In your .angular-cli.json file, modify the style property to add the css file besides your other styles (you should already have styles.css by default)

"styles": [
  "styles.css",
  "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
],

edited Feb 26, 2018 at 15:22

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

answered Feb 26, 2018 at 15:13

David

34.6k13 gold badges90 silver badges124 bronze badges

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

Comments

Kraken · Accepted Answer · 2018-02-27 07:56:35Z

1

Actually you can import them to in your .angular-cli.json here

  "styles": [
        "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css,
         ...
      ],

edited Feb 27, 2018 at 7:56

answered Feb 26, 2018 at 15:14

Kraken

1,97516 silver badges23 bronze badges

2 Comments

Zlatko Over a year ago

Usually there is no need for view encapsulation, if the styles are not overlapping.

David Over a year ago

Yes, Encapsulation.None means that the component styles will leak to child elements Here, styles are applied at the application level, so there is no need for that

Collectives™ on Stack Overflow

Import css file into component

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related