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

Answer 1

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

Answer 2

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

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