angular-cli 和引导程序 4

Question

我用 angular 2 移动了我的第一步，特别是我使用 angular-cli 官方工具来创建新项目。

我就这样新建了一个项目

ng new [my-project-name]

项目已正确创建。

之后我想安装 bootstrap 4，并按照 angular-cli 页面中的官方指南进行操作。

我用 npm 安装引导程序：

npm install bootstrap@next

然后我在 angular-cli.json 中添加该行：

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],

在应用对象中。

当我构建应用程序并在服务器中运行它时：ng serve

我在 index.html 中找不到引导 css 和 javascript 的参考。

我不明白这个文件的导入是自动添加到我的 index.html 中还是我需要手动添加。

Answer 1

当您将脚本和样式条目添加到 angular.cli.json 文件时，它们会添加到全局范围。具体来说，它们被添加到 scripts.bundle.js 和 styles.bundle.js。无需将它们添加到 index.html。停止并重新启动 ng serve 后你应该很好。为了更好地衡量，我在对 angular.cli.json 进行更改后运行 npm 重建。

Answer 2

您不需要在 HTML 文件中手动添加任何内容。它会自动为您完成。

原因如下：

您的 CSS 样式将添加到 styles.bundle.css 文件中。因此，当您运行应用程序时，您将在 HTML 源代码中看到以下样式表链接：<link href="styles.bundle.css" rel="stylesheet">。如果您在浏览器中单击styles.bundle.css，它将向您显示它一起编译的所有样式。

还有一个重要的事情。我还建议您将 angular-cli.json 文件中样式表的顺序交换为以下内容：

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

上述更改的原因是您的文件是按照您在 angular-cli.json 文件中提供的顺序编译和提供的。因此，假设您在 styles.css 中为 btn-primary 编写了一些自定义样式，这些样式将始终被 bootstrap.css 覆盖，您将永远不会看到您的样式在 UI 中应用，您将无法弄清楚出了什么问题。

如果您按照我的建议交换文件的顺序，将首先加载引导程序样式，然后是您的自定义样式，从而用您自己的样式覆盖引导程序的样式。这将是您现在需要对您的情况进行的唯一修复，并且其他一切都应该可以顺利进行，而无需您付出任何努力。

Answer 3

我不知道该文件的导入是自动添加到我的 index.html 中还是我需要手动添加。

需要自己添加。