Why isn't local bootstrap.css seen?

Question

In an Angular 4 project, when I reference

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">

in index.html, all is well. If I comment out the above, I no longer have styling. My paths look like this:

- node_modules
- e2e
- src
-- lib
-- main.ts
---- bootstrap
------ dist
-------- css
- .angular-cli.json

I do have this entry in .angular-cli.json:

  "styles": [
    "styles.css",
    "./lib/bootstrap/dist/css/bootstrap.css"
  ],

Why doesn't the above work? boostrap.css is in the referenced folder. index.html is in the root of the src folder.

Is folder lib is at the same level as the .angular-cli.json file? What does your folder structure look like? Try "../lib/bootstrap/dist/css/bootstrap.css" — Alexander Staroselsky
– Alexander Staroselsky, Commented May 18, 2017 at 16:44
Do you really have a css folder within dist? I don't see it in the structure — Maria Ines Parnisari
– Maria Ines Parnisari, Commented May 19, 2017 at 2:35

Alexander Staroselsky · Accepted Answer · 2017-05-24 21:10:37Z

1

If you folder structure is as follows:

- node_modules
- e2e
- src
- .angular-cli.json
-- main.ts
-- lib
---- bootstrap
------ dist
-------- css
---------- bootstrap.css

Then the entry within angular-cli.json needs to be with a prefix of ../ or target the lib folder directly as it's the same level as main.ts:

"styles": [
  "styles.css",
  "../src/lib/bootstrap/dist/css/bootstrap.css"
],

or

"styles": [
  "styles.css",
  "lib/bootstrap/dist/css/bootstrap.css"
],

The paths need to be relative to the main.ts entry point/file.

Hopefully this helps!

edited May 24, 2017 at 21:10

answered May 18, 2017 at 16:49

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

7 Comments

4thSpace Over a year ago

Based on the updated tree structure in the OP, I've tried this without success: ./src/lib/bootstrap/dist/css/bootstrap.css. ../lib/bootstrap/dist/css/bootstrap.css also does not work.

4thSpace Over a year ago

I checked your project and that does seem to work. But if I put an invalid path to bootstrap.css, I don't see any effect. How is that even possible? It should break the styling right?

Alexander Staroselsky Over a year ago

If you clone the sample project and put an invalid path, @angular/cli during a command like ng serve will throw errors and prevent compilation.

Alexander Staroselsky Over a year ago

If I change the path in .angular-cli.json to "../foobar/src/lib/bootstrap/dist/css/bootstrap.css", it gives an error like "ERROR in multi ./src/styles.css ./foobar/src/lib/bootstrap/dist/css/bootstrap.css Module not found: Error: Can't resolve..."

4thSpace Over a year ago

ah - I see that now and can replicate the error on my site. I'm not sure what to do. The path is correct because the site builds. Yet, the only way I can get the styling to work is to use the CDN bootstrap.css. Do you have any ideas on this?

|

Collectives™ on Stack Overflow

Why isn't local bootstrap.css seen?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related