angular-cli和bootstrap 4

Question

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

我以这种方式创建了一个新项目

ng new [my-project-name]

该项目是正确创建的.

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

我用npm安装bootstrap:

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"
],

在app对象中.

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

我没有在index.html中找到bootstrap css和javascript的参考.

我不明白是否在我的index.html中自动添加了此文件的导入,或者我需要手动添加它.

Answer 1

将脚本和样式条目添加到angular.cli.json文件时,它们将添加到全局范围.具体来说,它们被添加到scripts.bundle.js和styles.bundle.js中.没有必要将它们添加到index.html.停止并重新启动服务后,您应该好好去.为了更好的衡量,我在更改angular.cli.json后运行npm rebuild.

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中应用,你将无法弄清楚出了什么问题.

如果按照我的建议交换文件的顺序,首先会加载引导程序样式,然后加载自定义样式,从而使用自己的样式覆盖bootstrap的样式.这将是您现在需要做的唯一修复,其他一切都应该顺利进行,而不需要您付出任何努力.

Answer 3

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

需要你自己添加。