web-dev-qa-db-ja.com

Angular CLI cssファイルをChrome Dev Toolsに）

スタイルをソースマップして、Chrome Dev Toolsを追加されたローカルワークスペースに永続化できるようにする方法はありますか？

Chrome Dev Toolsは、要素インスペクターのstyles.scssタグの<style>...</style>にあるすべてのスタイルを表示しています。

enter image description here

enter image description here

私はChrome @ vt5491がSOここでそれを行った方法と同様の開発ツールワークスペースをセットアップしました： https://stackoverflow.com/ a/37627935/176249 そしてそれは.tsファイルで機能していると思いますが、要素スタイルはng serveで構築されているので、要素インスペクトのソースマップにリンクしませんindex.htmlの<style>要素のようです。

  • ng serve -dev -p=8081を実行しています
  • ng serve -dev -p=8081 --aot=trueを試しましたが、ENONET ng.factory.js missing errorを取得しました
  • app.component.cssとstyles.scssでスタイルを入れてみました
  • 私はng buildでこれを試しましたが、すべてのスタイルをindex.htmlの<style>にも入れます

これは、現在Angular CLIを使用している方法ですか？おそらくその下のWebパックを微調整していますか？コンパイルされたスタイルシートごとに<style>タグを追加しているようです。これがどのようにCLIは現在動作しています。多分これは単なる質問ではなく機能のリクエストですフロントエンドの作業を正しく行っているため、この作業を行うと時間を節約できます。

関連：

提供されたアドバイスをありがとう。

angularwebpackgoogle-chrome-devtoolswebstormangular-cli
20
Mikeumus

Angular-cliはwebpackを使用しますが、/ node_modules/angular-cli/modelsに独自の構成ファイルが付属しています。

これらは変更できますが、angular-cliをアップグレードすると、ファイルが上書きされます。必ずバックアップしてください。

はい、インラインに進むことを意図しています<style>タグ。これは奇妙に思われ、別のファイルにする必要があることに同意します。これにより、主にユーザーがキャッシュしてビューのチャンクサイズを小さくすることができます。開発モードではキャッシュしたくないのでインラインで良いと彼らが思うかもしれませんが、これは問題ありませんが、「ngビルド」では独自のファイルにコンパイルする必要があります。

「extract-text-webpack-plugin」を使用してそれを行うようにwebpackを設定できることは知っていますが、あまり詳しくありません。

私はangular-cliがビルド時にそれを行うか、そのための構成にオプションがあることを望みます。

4
ggedde

入力するとng serveデフォルトでangular cliはcssファイルのsourcemapsファイルを含みませんが、含めることができますこのコマンドを入力して

ng serve -sm -ec

または

ng serve --sourcemap --extractCss

Angular Cli -v 1.0.3、および詳細情報を使用します- Angular CLIの特殊なケース

13
Serhiy Koziuk