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

【问题标题】：How to add custom CSS files globally for angular 6 project如何为 Angular 6 项目全局添加自定义 CSS 文件
【发布时间】：2019-01-11 00:49:00
【问题描述】：

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

【问题讨论】：

您在 src 文件夹下的 styles.css 中声明的任何内容都是全局的
你的 style.css 应该在列表的最后。
我知道，但我希望其他文件单独全局
当您使用开发工具检查呈现的 html 页面时，请扩展您对呈现的 html 页面中实际包含的样式的回答。

标签： css angular angular6

【解决方案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';

替代方案：本地引导 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 中声明了。

【讨论】：

【解决方案2】：

在 angular.json 中添加到样式数组的任何 CSS 样式文件都将被注入到 index.html 并且将是全局的，这意味着添加到这些文件中的 any 类您可以在任何组件中使用它。

另一种方法是手动将样式文件添加到 index.html，如果文件托管在 cdn 或 assets 文件夹中，则此工作。

【讨论】：