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

Posted 2023-03-06

【中文标题】如何为 Angular 6 项目全局添加自定义 CSS 文件

【英文标题】：How to add custom CSS files globally for angular 6 project

【发布时间】：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 页面中实际包含的样式的回答。

【参考方案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 文件夹中，则此工作。