Question

我克隆了角度2种子项目，该项目为我的Angular 2项目的开发提供了快速，可靠和可扩展的启动器。

现在，我想将Twitter Bootstrap安装到我的项目中。我遵循了Angular文档：

让我们添加样式表。



在应用程序根文件夹中打开终端窗口并输入命令：

npm install bootstrap --save



打开index.html并将以下链接添加到。

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

但Twitter Bootstrap类在我的html文件中不起作用。当我从浏览器检查源代码时，发现我的 index.html 文件不包含这行代码 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">即使我已将其添加到我的索引中。我曾尝试多次刷新浏览器，我已经搜索了一种可配置的方式来安装Twitter Bootstrap到我的项目但没有找到。

这是我的index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="<%= APP_BASE %>">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= APP_TITLE %></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <!-- endinject -->



</head>
<body>

  <vynd-web-user-app>Loading...</vynd-web-user-app>

  <script>
  // Fixes undefined module function in SystemJS bundle
  function module() {}
  </script>

  <!-- shims:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script>
    System.config(<%=
      JSON.stringify(SYSTEM_CONFIG, null, 2)
    %>)
  </script>
  <% } %>

  <!-- libs:js -->
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>-->
  <!-- endinject -->

  <!-- inject:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script>
  System.import('<%= BOOTSTRAP_MODULE %>')
    .catch(function (e) {
      console.error(e,
        'Report this error at https://github.com/mgechev/angular2-seed/issues');
    });
  </script>
  <% } %>

</body>
</html>

以下是我的项目结构概述：

以下是我浏览器中加载的 index.html 文件：

Answer 1

问题在于这部分代码

<!-- inject:css -->
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->

首先，当我在 index.html 文件中看到和条评论时，我认为创建角度2种子项目的团队提供了那些为我们提供更易读的代码的评论，最好在这两个评论之间添加每个新的 css 库。但是当我在这两条评论之外添加 twitter bootstrap 框架时，它的效果非常好。也许位于和之间的每一行代码都会被一些角度配置文件中的一些自动注入的代码覆盖。

Answer 2

如果您在项目中使用angular-cli，我的回答可能对您有用。

在根项目目录中运行 npm install --save bootstrap
修改 .angular-cli.json - 文件位于同一位置。在此处找到“样式”部分

并添加 bootstrap.css ：

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

我在项目中添加了"../node_modules/bootstrap/dist/css/bootstrap.min.css",。现在我可以使用所有引导类。

P.S。

如果您不仅需要引导样式，还需要一些引导脚本，只需在相应部分中添加 .angular-cli.json 脚本位置：

  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

Answer 3

加载.css的路径应该是css / bootstrap / bootstrap.min.cs

请记住，如果您将jack放在index.html中，它会尝试查找该文件所在的父文件夹，并且因为您的css位于您当前所在文件夹中的文件夹中让index.html试试。

希望这有帮助

如何将Twitter Bootstrap安装到角度2项目？

3 个答案:

P.S。