在 WebStorm 中使用 Angular 4 启用 Bootstrap Intellisense

Question

我正在学习 Angular 4，我正在使用 Bootstrap CSS。

我已经使用 npm 安装了 Bootstrap 库，并且我已经使用 src 下的 style.css 文件在我的 Angular 项目中导入了 Bootstrap文件夹。

一切正常，但 WebStorm 在我编码时没有给我任何建议 Bootstrap 类，我不明白为什么。我需要设置什么吗？

如果我 link Bootstrap 在我的 index.html 文件中一切正常。

Answer 1

问题来了。如果您使用 CDN 引用它，则无法自动完成 Bootstrap：

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

因此，您必须在本地下载 Bootstrap 文件，并在开发过程中引用它来填充自动完成功能。

所以你会下载它并把它放在项目中，然后像这样在本地引用它：

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

开发完成后，切换回CDN联动。不幸的是，这是让它自动完成的唯一方法。：/

Answer 2

这可能看起来有点奇怪，但我通过将整个 bootstrap 文件夹 (zip) 复制到我的 index.html 所在的同一目录中来实现这一点。我做了同样的事情font-awesome 文件夹也是。

帮我找到了！让我知道它是否有效。

我刚刚看到了一种新的方法来做到这一点。在 webstorm 中右键单击一个文件夹，然后 select "Mark as resource root"。这对我也有用。

Answer 3

嗨，我知道这有点晚了，但我最近遇到了同样的问题，不得不查看我的一个旧项目。这是由于 webstorm 查看你的 package.json for devDependencis 解决这个问题而不移动任何文件的方法是当你安装 bootstrap 做 npm install bootstrap@4.0.0-alpha --save-dev 时会自动将它添加到 package.json 或手动编辑它看起来像这样 "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"

我已经确认这已经解决了我的问题

在 WebStorm 中使用 Angular 4 启用 Bootstrap Intellisense

Enable Bootstrap Intellisense using Angular 4 in WebStorm

webstorm

twitter-bootstrap

angular