☰

Angular CLI でアプリケーションのテーマスタイルを遅延ロードする 質問する

tag-icon • tag-icon angular sass angular-cli
Angular CLI でアプリケーションのテーマスタイルを遅延ロードする 質問する

hrefテーマ設定の目的で の を切り替えようとしています<link />が、SCSS テーマは にシンボリックリンクされている monorepo のパッケージ フォルダー内にありますnode_modules。これらをコンパイルして参照できるようにする必要があります。

次の修正された問題に遭遇しました:角度/角度-cli#3401そして、同様のものを実装しようとしています:

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/dark.scss",
        "output": "dark",
        "lazy": true
    }
],

私の理解では（おそらく間違っているが）、これはdark.scssファイルをコンパイルしdist/dark.bundle.css、次のようにロードできるというものだった。http://localhost:4200/dist/dark.bundle.cssしかし、期待通りに動作しません。私が何かを誤解しているのでしょうか、それとも完全に間違ったやり方をしているのでしょうか?

node_modulesアプリで遅延ロードできるSCSS ファイルをコンパイルするにはどうすればよいでしょうか? 代わりに試すことができる別の/より良い方法はありますか?

その他の注意事項：

  • Angularバージョンの使用4.2.4
  • Angular CLIバージョンの使用1.3.0
  • のこのアプローチのドキュメント
  • 私はモノレポで作業しているのでnode_modules/@org/themesシンボリックリンクです
  • ng serve --preserve-symlinks上記が問題である場合に備えてオプションを使用してみました。違いはありませんでした

私は、Angular Materialのドキュメントウェブサイトはこの問題に取り組んでいますまた、アプリケーションを提供する前に、ディレクトリ内の SCSS ファイルを CSS ファイルにコンパイルするカスタム ビルド スクリプトがあるようですassets。上記の問題が修正されたため、この手順は不要になったと思いましたが、そうではないかもしれません。これが唯一の方法でしょうか?

解決済み

@Kuncevic に感謝します。--extract-cssフラグがありませんでした。

動作構成:

"styles": [
    "styles.scss",
    {
        "input": "../node_modules/@org/themes/src/dark.scss",
        "output": "themes/dark",
        "lazy": true
    }
],

そして次のサーブスクリプトを使えば、http://localhost:4200/themes/dark.bundle.css:

ng serve --extract-css --preserve-symlinks

ベストアンサー1

設定すると、バンドル"lazy": trueが表示されなくなりますindex.htmlが、そのバンドルを遅延ロードするメカニズムはありません。コメント:

lazy オプションは実際には何も遅延ロードしません。アプリケーションの起動時に実行されないようにするだけです。

確かに"lazy": true最初は少し混乱しますね。

実行すると、ng buildビルドで何が出力されるかを実際に確認し、cli によって生成されたすべてのファイルを分析できます。

次の操作を行うと:

{
    "input": "../node_modules/@org/themes/dark.scss",
    "output": "dark",
    "lazy": true
}

ファイルに直接アクセスできるはずですhttp://localhost:4200/dark.bundle.jsしかし、index.html設定した通りには表示されません"lazy": true

dark.bundle.css開発モードではなくバンドルを取得する場合は、フラグdark.bundle.jsを使用できます--extract-css。

開発モードでCLI がバンドルにスタイルを生成する理由は、jsこの方法の方がはるかに高速だからです。ただし、prod ビルドを実行すると、デフォルトでng buld --prodに出力されます。.css

おすすめ記事