問題タブ [patternfly]

キークローク認証を使用してAngular4アプリケーションを構成するのはこれが初めてです。ここでは、ナビゲーション メニューに patternfly を使用しています。最初に私のメニューは

このために、次のようにアプリをブートストラップしました：main.ts

しかし、Keycloak を実装したときに、main.ts を変更しました。

メニューの私のHTMLは次のとおりです。

ここでは、このアプリで angular-cli を使用しています。そして、Angular 4.3.5 誰かが解決策を教えてください。注 : patternfly css を index.html にリンクして、webpacking の angular-cli.json から削除しようとしました。まだそれを機能させることができませんでした

プロダクション モードで react-bootstrap をビルドした後、ドロップダウン メニューが正しく表示されないという問題が発生しています。

詳しく調べてみると、HTML が間違ったクラスでロードされているように見えます: <ul role="menu" class="super-colors -menu" aria-labelledby="dropdown-custom-1">. この場合、クラスは でありdropdown-menu、 ではありません-menu。

props 要素を調べると、これはbsClass正しく設定されていないために発生しているように見えます。

参考までに、上記の要素のコードを次に示します。

その他の (おそらく) 関連情報:

• react-bootstrap の上に構築された patternfly-react という UI ライブラリを使用していますが、問題は react-bootstrap にあるようです。
• アプリは react-bootstrap 0.32.1 を使用します
• これは、アプリが本番モードでビルドされている場合にのみ表示され、開発モードは正常に動作します。
• Angular 6 アプリ内で React を実行するという、かなり型破りなセットアップがあります。

何がこれを引き起こしているのか、誰にも手がかりがありますか?

d3.js、React、および PatternFly 4 を使用して単純な折れ線グラフを作成しようとしています。選択 ID で意図したとおりに動作する他のグラフを作成しましたが、これは動作を拒否し、指を置くことができません問題。

id は、このクラスが呼び出されたときに既に作成されているため、select が発生したときに存在することに注意してください。

私は今のところd3.jsの初心者です。このコードは、オンラインの例からいくつかの調整を加えたコピーペーストです。

私はwebpackとnext.jsが初めてです。次のエラーが表示されます。これは、webpack が CSS ファイルを正しく理解/解析/ロードしていないようです。

これを修正したり、さらにデバッグしたりするにはどうすればよいですか? 私は新しいので、私は完全に迷っています。この問題の原因は何ですか?

詳細:

1.) 完全なスタックトレース:

2.) CSS インポートを行うファイル

file:///C:/devtmp/workspaces/nextjs/web-admin/node_modules/@patternfly/react-styles/css/components/Backdrop/backdrop.js

3.) CSS

file:///C:/devtmp/workspaces/nextjs/web-admin/node_modules/@patternfly/react-styles/css/components/Backdrop/backdrop.css

4.) next.config.js の抜粋

どうもありがとう！