Angular CLIでAngular 4でWebpackを設定する

Question

私のアプリケーションでは、NPMを使用してロードされたSASSといくつかのフロントエンドライブラリを使用したいと思います。バンドルを設定するには、Webpackのようなツールを使用する必要があります。

まず、Angular-CLIが使用するWebpack設定ファイルを見つけようとしました。後で、私はAngular-CLIがあなたに構成から自由であることを望んでいることを発見しました。しかし、私の問題は、アプリケーションを実行する前にSASSトランスリンギングなどを設定する必要があり、手作業でコマンドを実行することは本当に良い考えではないということです。私は通常ng serveを使用します。これは名前が示すように、自分のアプリケーション+変更を監視して変更を適用することができます。私がしたいのは、このプロセスで変更が検出されたときに実行するスクリプトをいくつか実行することです。この問題についてどうすればいいですか？

更新：SASSをコンパイル

は私が解決された、解決しなければならなかったものの一つでした。また、Autoprefixerを実行して、ビルドでnode_modulesをパッケージ化したい何が最善の方法でしょうか？

Answer 1

私は、数時間にわたりドキュメントやグーグルーグなどで検索した結果、上記の1つの問題をすべて解決できました。それは簡単だった。

使用してCSSプリプロセッサ

@NeilLunnが提案のように、SCSSや他のプリプロセッサを使用するには、使用することができます。

"defaults": { 
    "styleExt": "scss" // or another pre-processor, or plain css itself. 
} 

他のプリプロセッサのを使用しての詳細情報はここで見つけることができます： https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

プロジェクト

でロードCSS/JSの依存関係

これはかなり簡単でした。 Bootstrapがどのようにロードされるかの例を見ることができます（例：here）。

このAutoprefixer使用

は

について見つけるための最も痛みを伴うものであったが、私は最終的にそれを見つけました。あなたがしなければならないのはthis right hereで、それは実際に働いた！

Answer 2

角度のあるcliは、鳴り響くほどではなく、箱のすぐ下にあります。あなたは、あなたがフル制御したい場合はもちろん

ng help 

：あなたはng newに--styleで構成するか、または単にあなたが完全なオプションを確認したい場合は、単にヘルプをリスト.angular-cli.json

"defaults": { 
    "styleExt": "scss", // or sass; both are accepted 
} 

を編集することができます実行して標準的なウェブパック設定を得ることができますng eject：

ng eject 

いつでも。