5

Angular 2 アプリに、あらゆる場所で使用されるフォントやカラー スキームなどのシャード スタイルを追加したいと考えています。以前は、インデックス ページに次のようなタグを追加して、常にこれを行っていました。

<link rel="stylesheet" href="css/framework.css" />

これは、アプリを提供するために CLI が使用しているものでは機能しません。ビルド後に css ファイルを dist フォルダーに手動で追加しようとしましたが、それもうまくいかないようです。

anugular-cli-build.jsこのようなフォルダにcssも追加してみました

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'css/*.css'
    ]
  });
};

cssビルドするように指示しても、フォルダー内のファイルはまだビルドされていないようです。

問題のスタイル シートは、アプリ全体のベース ライン スタイルであることを意図しており、styleUrl タグに含める必要があるものではありません。

4

3 に答える 3

6

vendorNpmFiles 構成は、どの node_modules を dist ディレクトリにコピーするかを cli ビルドに指示するためのものです。

src ディレクトリに「resources」ディレクトリを作成し、そこにアプリ全体の css ファイルを配置するだけで、それ以上の構成なしで dist ビルドにコピーされました。

src
|- app
|  |
|
|- css
|  |
|  |- framework.css
|
|- index.html

ブートストラップのようなフレームワークを含めようとしている場合は、vendorNpmFiles 構成を使用して node_modules からコピーできます。

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'bootstrap/dist/**/*',
      ...
    ]
  }
}

次に、index.html での参照は次のようになります。

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>

于 2016-05-26T15:33:55.847 に答える
3

参照しているファイル（つまり[framework-x].css）は静的であるため、ディレクトリを利用して、追加の構成なしpublicでファイルをフォルダーに直接コピーできます。dist

あなたの包含に基づいて：

src
|-- public
|   |-- framework-x.css

ファイルは、次のように dist ディレクトリに移動されます。

dist
|-- framework-x.css

したがって、index.html で直接参照できます。

于 2016-05-27T03:02:45.043 に答える