何为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相同的内容进行渲染，但是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中声明了它。