在 Angular 4 中使用 Bootstrap 4

Question

我想知道为什么我需要在 Angular 中导入 styles.css 中的 bootstrap 文件。你真的需要这样做才能让 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"
  ],

Answer 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 或清理缓存或打开隐身模式 window 以确保没有从缓存中加载任何内容。

在 Angular 4 中使用 Bootstrap 4

Use Bootstrap 4 in Angular 4

angular

angular-cli

bootstrap-4

twitter-bootstrap-4