web-dev-qa-db-ja.com

angular 6プロジェクトのカスタムCSSファイルをグローバルに追加するHo

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は正常に機能しています。

cssangularangular6
8
Ravi Bhushan

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にすべてのスタイルをインポートすることを好みます。これは、すでにangle.jsonで宣言されているからです。

5
Ravi Bhushan

Angular.jsonのスタイル配列に追加されたCSSスタイルファイルは、index.htmlそして、これはグローバルに意味しますanyこれらのファイルに追加されたクラスは、任意のコンポーネント内で使用できます。

別の方法は、cdnまたはassetsフォルダーにあるファイルHostの場合、この作業を手動でindex.htmlにスタイルファイルを追加することです。

1
malbarmawi