Angular应用引入Bootstrap失败：配置后仍提示找不到文件

我看了你遇到的问题，大概率是Bootstrap Beta包的文件路径不对，加上Angular CLI配置的小细节，咱们一步步来解决：

1. 确认Bootstrap Beta的实际文件结构 #

你安装的bootstrap-beta包，它的CSS文件并不是放在bootstrap/css/目录下，而是标准的dist子目录里。正确的文件路径应该是：

node_modules/bootstrap/dist/css/bootstrap.min.css

2. 修正styles.css中的导入语句 #

把styles.css里的导入代码改成：

@import '~bootstrap/dist/css/bootstrap.min.css';

3. 修正angular-cli.json的styles配置 #

同样把配置里的路径替换为正确的dist路径，同时注意配置的语法格式（数组要用方括号包裹，你之前的写法有误）：

{
  "apps": [{
    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
    ]
  }]
}

4. 额外提示：二选一即可，无需重复配置 #

其实你不需要同时在styles.css导入和angular-cli.json里配置全局样式，选一种方式就够了：

• 如果你用angular-cli.json配置，就可以删掉styles.css里的@import语句，CLI会自动帮你全局引入Bootstrap样式
• 如果你偏好使用@import，那angular-cli.json里只保留styles.css即可，不用再单独加Bootstrap的路径

5. 最后一步：重启Angular开发服务 #

修改完配置文件后，一定要重启你的Angular开发服务器，不然新的配置不会生效哦！

这样调整后，应该就能解决文件找不到的问题了，试试吧！

内容的提问来源于stack exchange，提问作者ramu