使用 angular-cli 时无法加载 twitter Bootstrap 资源

Question

我使用 Angular CLI 构建了我的第一个 Angular2 应用程序。我正在尝试使用 twitter Bootstrap 模块，但找不到它：

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.css 

我有一个 index.html，在

中有以下行

<link href="site.css" rel="stylesheet">

然后我在 ./public/site.css 中也有一行：

@import 'node_modules/bootstrap/dist/css/bootstrap.css';

Bootstrap 模块存在于 ./node_modules/bootstrap/dist/css/.. 但它仍然找不到它。关于我做错了什么有什么想法吗？

Answer 1

在angular-cli-builds.js 中，您需要添加文件以便在构建期间复制它。

vendorNpmFiles: [
  ...
  'bootstrap/dist/css/bootstrap.css'
]

它将在浏览器中的供应商文件夹中可用，因此将site.css更改为

@import 'vendor/bootstrap/dist/css/bootstrap.css';

如果它不起作用，请在构建后手动检查您的dist/ 文件夹，找到文件并更新路径...

更多信息在这里：3rd party lib installation