問題タブ [extract-text-plugin]

create-react-appWebpack を使用してバンドルされたファイルextract-text-pluginを生成する React アプリを作成しています。次のように、JS ファイルで生成された CSS ファイルのファイル名を知りたいと思います。jscss

おそらくカスタムローダーまたはWebpackプラグインを使用して、それは可能ですか?

編集明確にするために:create-react-appここでは問題ではありません。それを削除するか、カスタム構成を作成できます。私の問題は、JS スクリプト内から CSS ファイル名を知る方法です。

でうまくいきませExtractTextPluginんcss-loader。実行すると、次のエラーが表示されますwebpack -p。

私のプロジェクトの構造は次のようになります。

私のグローバルstyles.cssの内容は次のとおりです。

styles.cssErrorMessage コンポーネントの内容は次のとおりです。

これが私のwebpack構成です：

私は何を間違っていますか？私が使用しない場合、composesすべてがうまく抽出されます。コードが開発モードで実行されている場合はエラーが発生しないことに注意してください。これは構成に関係していると思いExtractTextPluginます。webpack v3、node v8.4.0、およびを使用してextract-text-webpack-plugin v3.0.0います。

extract-text-webpack-pluginWebpack 3でスタイルシート タグを正しい場所に配置するのに問題があります。

私のプロジェクトでは、CDN から取得したサードパーティのスタイルシートと、ローカルのスタイルシート バンドルを使用しています。サードパーティのスタイルでローカル バンドルをオーバーライドしたいのですが、抽出テキスト プラグインはローカル スタイル タグを最後に配置します。これは問題です。ローカル バンドルには、サードパーティ コンポーネントを壊すリセットが含まれているからです。

私の index.html テンプレートは次のようになります (言い換え):

結果のマークアップは次のとおりです。

extract-text-webpack-pluginとのドキュメントを検索しましたhtml-webpack-pluginが、何も得られませんでした。ローカル スタイルをサードパーティ スタイルでオーバーライドする方法を知っている人はいますか?

もう少し背景として、私の CSS 構成は次のようになります。

HtmlWebpackPlugin も使用しています。