web-dev-qa-db-ja.com

Angular-index.htmlにCSSファイルを含める

CLIで作成したangularプロジェクトでangular2-busyライブラリを使用しようとしていますが、スタイルシートのインポートに問題があります。

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css">

ブラウザは、正しいパスがあってもファイルを見つけることができないと私に言っています。ファイルが存在することも確認しました。 rel="stylesheet"を取り出すと、エラーは発生しませんが、アニメーションが機能しません。

enter image description here

好奇心旺盛な方のために、私が使用しようとしているパッケージを以下に示します。 https://www.npmjs.com/package/angular2-busy

cssangularangular-cli
13
ecain

コードの最後に自己終了がありません。ブラウザがこれを修正していない可能性があります。

<link rel="stylesheet" href="/node_modules/angular2-busy/build/style/busy.css" />

また、rel = "stylesheet"を削除しても、ブラウザは参照している参照の種類を正確に把握する必要があるため、問題は解決しません。

終了タグの修正が機能しない場合は、パスが間違っています。パスの先頭に../を追加してみることもできます。これにより、サイトが存在するフォルダーに相対的になります。

<link rel="stylesheet" href="../node_modules/angular2-busy/build/style/busy.css" />
0
Scornwell

Angular CSSがリンクされたプロジェクトを作成する手順

  1. angular.jsonでは、「styles」の下にあるCSSファイルへのすべての参照を削除します。これは次のようになります。

     "styles": [],

  2. "src"フォルダーの下にあるindex.htmlで、 "src"フォルダーから始まるパスを含むCSSファイルへのリンク参照を手動で追加します。これらのファイルのフォルダーが「src」ルートフォルダーの下のどこかにあれば、プロジェクトのどこにでもcssを保存できます。以下のパスのプロジェクト内の物理CSSファイルは、「src/styles」の下にありますが、リンクパスは、stylesフォルダーとファイル名だけにする必要があります。

    <link href = "styles/mystyles.css" rel = "stylesheet" />

  3. プロジェクトで必要なbootstrap、font-awesomeなどのCSSファイルは、プロジェクトの「node_modules」フォルダーから下のフォルダーに手動でコピーする必要があります上記の＃2のCSSファイルと同じように、「src」フォルダ。または、完全に修飾されたURLからオンラインで参照することもできます。上記のように「index.html」でそれらへのリンクを作成するか、＃2でCSSファイルにインポートする場合も機能します。 「node_modules」フォルダーから以前にそれらをインポートしていた場合、Angular CLIまたはwebpackはCSSをコンパイルしていないため、これらのパスを解決しないため、このパスは機能しません。上記のローカルフォルダパスをポイントします。

リンクしたくない場合は、bootstrapとfont-awesome CSSファイルの2つの「最小」バージョンをインポートして、メインスタイルシートと同じフォルダーにドロップしてインポートするだけです。次の2つのタグを使用して、そのスタイルシートに挿入します。

@import "bootstrap.min.css";
@import "font-awesome.min.css";

  1. 上記の同じangular.jsonファイルの「assets」JSON設定で、＃2と＃3のCSSファイルの場所への参照を追加して、ビルダーがそれらをdistフォルダーにコピーできるようにします。下部にある新しいスタイルパスに注意してください。他のフォルダにCSSがある場合は、ここに追加することもできます。これはビルダーにdistフォルダーにCSSディレクトリーを作成し、その中にすべてのCSSファイルをコピーするように指示するので、本番用にビルドする場合、index.htmlリンクはサーバー上の適切なCSSファイルを指します。

    "assets": [
  "src/favicon.ico",
  "src/assets",
  "src/api",
  "src/styles"
],

これで、すべてのCSSへの強力な一連のリンク要素がindex.htmlファイルの先頭にあり、Angularプロジェクトで通常どおりに編集できます。両方で機能することがわかっています。 Angular開発テストサーバーおよびdistプロダクションコピー内。Webサイトは、メモリ内のCSSのブラウザキャッシュと永続的なファイルキャッシュの恩恵も受けます。

リンクされたCSSを使用した単純なWebサイトの自然な部分を理解するために、ドキュメントとテストを掘り下げるのに1日かかりました。彼らがこれを非常に複雑にして申し訳ありませんが、これは今ではうまくいきます。これは、コンパイルとビルドからCSSを削除するだけですangularシステムは、すべてのCSSをJavaScriptファイルにプッシュし、それをブラウザーのメモリ内のインラインスタイルシートブロックに埋め込みます。独自のリンクされたCSS htmlタグははるかに優れており、CSSカスケードルールをより適切にキャッシュおよび制御できます。

幸運を！

0
Stokely