Angular CLIを使用してアプリ全体のCSSファイルを追加するにはどうすればよいですか？

Question

Angular 2アプリにシャード・スタイリングを追加したいと思っています。フォントやカラースキームなど、どこでも使用されます。過去に私はいつも私のインデックスページに、このようなタグを追加することでこれを行っています。これは、CLIアプリを提供するために使用されているものでは動作しません

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

。私は手作業でdistファイルにcssファイルを追加しようとしましたが、それはうまくいきません。

私はまた、まだ私が構築するためにそれを教えてくれたときにcssフォルダ内のファイルを構築していないようです。この

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

ようanugular-cli-build.jsフォルダにCSSを追加してみました。

問題のスタイルシートは、アプリケーション全体のベースラインスタイルであり、styleUrlタグに含める必要はありません。

Answer 1

vendorNpmFiles設定は、どのnode_moduleをdistディレクトリにコピーするかをcliビルドに伝えるための設定です。

srcディレクトリに「resources」ディレクトリを作成してそこにアプリケーション全体のCSSファイルを作成し、それ以上の設定をせずにdistビルドにコピーできました。

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

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

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>

Answer 2

あなたは（すなわち[framework-x].css）を参照しているファイルは静的なので、あなたが目を利用することができますファイルdistに直接ファイルをコピーするには、追加の設定を行わずに、ディレクトリを開きます。

のあなた含めることに基づいて：

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

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

dist 
|-- framework-x.css 

だから、あなたは直接のindex.htmlで参照することができます。

Answer 3

ちょうど「.angular-cli.json」に以下のような必要なスタイルとスクリプトを追加し、最新のNG CLIで

が自動的にバンドルでそれを公開します

"apps":{ 
"styles": [ 
     "../node_modules/ng2f-bootstrap/dist/bootstrap.min.css", 
     "styles.css" 
     ], 
    "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.js" 
     ], 
}