3

I'm learning Angular 4 and I'm using Bootstrap CSS.

I've installed Bootstrap libraries using npm and I've imported Bootstrap in my Angular project using the style.css file under the src folder.

Everything works well but WebStorm doesn't suggest me any Bootstrap classes while I'm coding and I can't understand why. Do I have to set something up?

If I link Bootstrap inside my index.html file everything works fine.

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Matteo M.
  • 107
  • 2
  • 10
  • 1
    Can you explain a bit more? – Dieter Meemken May 26 '17 at 15:32
  • 1
    does the problem occur in any ,html file, or in some certain ones only? Please also make sure that `node_modules/bootstrap` is not marked as excluded – lena May 26 '17 at 17:07
  • Bootstrap files are in `myproject/node_modules/boostrap/dist~`. I've imported bootstrap css into my project editing `myproject/src/style.css`: `@import url("~bootstrap/dist/css/bootstrap.css");` – Matteo M. May 26 '17 at 19:34

3 Answers3

3

Hi I know this is a little late but i recently had the same issue and had to look to one of my older projects. This is due to webstorm looking at your package.json for devDependencis the way to solve this without moving any files around is either when you install bootstrap to do npm install bootstrap@4.0.0-alpha --save-dev which will automatically add it to package.json for you or manually edit it to look something like this "devDependencies": { "@angular/cli": "1.0.1", "@angular/compiler-cli": "^4.0.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "bootstrap": "^4.0.0-alpha.6"

I have confirmed that this has solved my issue

Harry
  • 3,333
  • 3
  • 18
  • 28
0

So here's the issue. You cannot auto-complete Bootstrap if you are referencing it with a CDN: 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

So instead, you have to download the Bootstrap file locally, and reference it during development to get it to populate the auto-complete functionality.

So you would download it and put it in the project, and reference it locally like so: 

<link rel="stylesheet" href="./css/css/bootstrap-theme.min.css" >

Once you have finished development, switch it back to the CDN linkage. This is the only way you can get it to auto-complete unfortunately. :/

Jordan Benge
  • 1,053
  • 1
  • 13
  • 30
  • I have downloaded boostrap locally using **npm**, so actually bootstrap sorce files are in `myproject/node_modules/boostrap/dist~` (I'm nor using CDN). In `myproject/src/style.css`, I've imported bootstrap CSS using `@import url("~bootstrap/dist/css/bootstrap.css");` – Matteo M. May 26 '17 at 19:30
  • And even with them relatively linked, it isn't auto-completing? – Jordan Benge May 26 '17 at 19:50
  • I can confirm you that, with the setup described above, the auto-complete feature doesn't work. – Matteo M. May 27 '17 at 09:47
0

This might seem kind of odd, but I got this able to work by copying the entire bootstrap folder(zip) into the same directory my index.html is in. I did the same with the font-awesome folder too.

Worked find for me! Let me know if it works.

I was just shown a new way to do this. In webstorm right click on a folder and select "Mark as resource root". That also worked for me.

WA E
  • 33
  • 5
  • I just tried to copy the `bootstrap.css` into the same directory of `index.html` and now the auto-complete works! – Matteo M. Jun 01 '17 at 08:57