在 Angular 4 中使用 Bootstrap 4

【问题标题】：Use Bootstrap 4 in Angular 4在 Angular 4 中使用 Bootstrap 4
【发布时间】：2017-08-24 20:30:39
【问题描述】：

我想知道为什么我需要在 Angular 的 styles.css 中导入我的引导文件。你真的需要这样做才能让 Bootstrap 4 在 Angular 4 中工作吗？我尝试不将它导入到 styles.css 中，但它不起作用，但是当我导入它时它起作用了。与 bootstrap 3 不同，您不需要将其导入到 styles.css 中，只需将其声明为 angular.cli.json 即可。

//styles.css
@import "~bootstrap/dist/css/bootstrap.min.css";



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

【问题讨论】：

标签： angular angular-cli bootstrap-4 twitter-bootstrap-4

【解决方案1】：

当你指定全局样式时

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

因此文件styles.bundle.js 被生成并注入到index.html 中

<script type="text/javascript" src="styles.bundle.js"></script>

然后，如果您对全局样式有任何问题，例如 styles is missing，您需要检查文件 styles.bundle.js 以查看您的样式是否真正被放置。它们可能丢失的原因之一是路径错误，在您的情况下，这似乎是完全正确的。

如果您仍然卡住，您需要确保您的浏览器没有从缓存中加载任何内容，因此只需按ctrl+f5 或清理缓存或打开隐身窗口以确保没有从缓存中加载任何内容。

【讨论】：