2016-07-19 6 views
2

私はbrowser-syncを持っていて、自分のアプリケーションのルートにホストされていて、角度で直接管理されていないスタイルシートでCSSを動的に注入して変更することができます。これはリロードを必要としません。browser-syncで角度2コンポーネントのsass/cssアップデートを挿入することはできますか?

しかし、私がマニュアルリロードを行わない限り、私が変更した場合、私のangle styleUrlはすべて更新されません。

私が気付いたのは、角度は<head>要素にスタイルを埋め込んでいるため、実際にはリロードされていません。

ブラウザ同期やその他の手法を使用してこれを回避する方法はありますか?

+0

すべてのスタイルをヘッダーに移動することです – AngJobs

+0

Angularは 'styles' /' styleUrls'で挿入されたCSSのスコープを計算して ' 'に添付しなければならないので、おそらく不可能です。 Angularにトリガーをかけることができない限り、または自分でAngularを変えることができない限り。とにかく、いつでもCSSの変更時にアプリケーションをリロードする 'browserSync'を設定することができます。 –

+0

ブラウザ同期に特有の答えがあるまで待つつもりですが、私の解決策はgulpとbrowser-syncのビルドプロセスをwebpack-dev-serverのwebpackに切り替えることでした。これはHot Module Reloadingです。一度それをセットアップすると、それはかなりきれいで、私が探しているものとまったく同じです。それはサイトをリフレッシュせずにだけでなく、非常にクールなhtmlやjavascriptを注入することができます。 – twilliams

答えて

2

Angular CLIを使用してアプリケーションを作成する場合は、css preprocessorsやbuild/devプロセスなど、これらの問題はすべて事前に処理されます。一度あなたがアプリを提供して何か(typescript/sass/scss)を変更すると、それは再読み込みされ、あなたのために再度注入され、試してみてください!

+0

Angular CLIが作成するセットアップは、よかったですね、ありがとう。 – estus

+0

@estusようこそ;) – Kutyel

+0

@twilliamsあなたは正しい答えとしてそれをマークできますか?^_ ^ – Kutyel

関連する問題