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

Answer 2

在angular.json中添加到样式数组中的任何CSS样式文件都将注入到index.html中，并且在全局范围内表示在这些文件中添加的 any 类，您可以在任何组件。

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

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

2 个答案: