在 Angular 6 应用中 Bootstrap 无法正常工作

Question

我希望在Angular 6应用中使用Bootstrap，目前我已经完成了以下步骤，但是似乎仍然无法正常工作：

1） 使用npm安装了Bootstrap、jQuery和popper.js。 2） 在Angular.json文件中输入以下内容：

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ...
]

我是不是漏了什么？这似乎行不通。

- s4tr2

---

你可以在Angular.json文件中修复问题，例如fix bootstrap in angular.json。 - Iman Bahrampour

Answer 1

在你的style.scss文件中使用import。

@import "node_modules/bootstrap/scss/bootstrap.scss"

并从angular.json文件中删除"node_modules/bootstrap/scss/bootstrap.scss"

- לבני מלכה

---

很高兴能帮忙 :) - לבני מלכה

请看这里：https://stackoverflow.com/questions/50559810/bootstrap-not-connect-to-the-angular-6/50559906#50559906 - לבני מלכה

是的，它可以工作，但当我尝试打开一个模态时，它不会关闭并占用整个页面。请帮帮我。谢谢。 - lpd

我建议你发布一个问题... 如果你发布了一个问题，请让我知道问题的链接。 - לבני מלכה

好的，我会做到，还有一个问题，如何在Angular 6中添加JQuery。 - lpd

Answer 2

首先将Bootstrap安装到应用程序中：

npm install bootstrap@latest --save (flag is optional)

然后在 Angular 中的 index.html 文件中导入 Bootstrap：

@import '~bootstrap/css/bootstrap.css'; (~ means the node_Modules)

我希望这能回答你的问题。

- Coder.exe