如何为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可以正常工作。

- Ravi Bhushan

---

在 src 文件夹下声明的 styles.css 中的任何内容都是全局的。 - Deepak Verma

你的style.css应该在列表的最后。 - Radonirina Maminiaina

我知道，但我希望其他文件可以单独成为全局的。 - Ravi Bhushan

请在您使用开发工具检查时实际包含在呈现的HTML页面中的样式方面扩展您的答案。 - Giacomo Voß

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

- Ravi Bhushan

Answer 2

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

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

- Muhammed Albarmavi