CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
4thSpace
4thSpace

Reputation: 44312

Why isn't local bootstrap.css seen?

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.

Upvotes: 2

Views: 84

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38777

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!

Upvotes: 1

Related Questions