如何为 Angular 6 项目全局添加自定义 CSS 文件

在 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 工作正常。

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 中声明了。