css - 如何为 Angular 6 元素全局添加自定义 CSS 文件

Question

在 angular.json 文件中，如果我添加

"styles": [
  "src/styles.css",
  "src/utility/vendor/bootstrap/css/bootstrap.css",
  "src/utility/vendor/font-awesome/css/fontawesome-all.min.css",
  "src/utility/vendor/animate.css/animate.min.css",
  "src/utility/vendor/slick-carousel/slick/slick.css",
  "src/utility/css/front.css",
  "src/utility/css/codepen.css"
],
    

这些文件只能用于 index.html 文件，而不是 app.component.html 或任何组件。其他组件甚至没有使用与 index.html 相同的内容呈现，但 index.html 工作正常。

Answer 1

1:配置angular.json:

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

2:直接在src/style.css或src/style.scss中导入:

@import '~bootstrap/dist/css/bootstrap.min.css';

备选方案:本地 Bootstrap CSS如果您在本地添加了 Bootstrap CSS 文件，只需在 angular.json 中导入即可

"styles": [
  "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
  "styles.scss"
],

或 src/style.css:

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

我个人更喜欢在 src/style.css 中导入我所有的样式，因为它已经在 angular.json 中声明了。