問題タブ [extract-text-plugin]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - JS ファイル内の Webpack CSS ファイル名
create-react-app
Webpack を使用してバンドルされたファイルextract-text-plugin
を生成する React アプリを作成しています。次のように、JS ファイルで生成された CSS ファイルのファイル名を知りたいと思います。js
css
おそらくカスタムローダーまたはWebpackプラグインを使用して、それは可能ですか?
編集明確にするために:create-react-app
ここでは問題ではありません。それを削除するか、カスタム構成を作成できます。私の問題は、JS スクリプト内から CSS ファイル名を知る方法です。
node.js - エラー: 構成は、セレクターが単一の場合にのみ許可されます:ローカル クラス名
でうまくいきませExtractTextPlugin
んcss-loader
。実行すると、次のエラーが表示されますwebpack -p
。
私のプロジェクトの構造は次のようになります。
私のグローバルstyles.cssの内容は次のとおりです。
styles.css
ErrorMessage コンポーネントの内容は次のとおりです。
これが私のwebpack構成です:
私は何を間違っていますか?私が使用しない場合、composes
すべてがうまく抽出されます。コードが開発モードで実行されている場合はエラーが発生しないことに注意してください。これは構成に関係していると思いExtractTextPlugin
ます。webpack v3
、node v8.4.0
、およびを使用してextract-text-webpack-plugin v3.0.0
います。
webpack - Webpack 抽出テキスト プラグイン - スタイルシート タグの位置の選択
extract-text-webpack-plugin
Webpack 3でスタイルシート タグを正しい場所に配置するのに問題があります。
私のプロジェクトでは、CDN から取得したサードパーティのスタイルシートと、ローカルのスタイルシート バンドルを使用しています。サードパーティのスタイルでローカル バンドルをオーバーライドしたいのですが、抽出テキスト プラグインはローカル スタイル タグを最後に配置します。これは問題です。ローカル バンドルには、サードパーティ コンポーネントを壊すリセットが含まれているからです。
私の index.html テンプレートは次のようになります (言い換え):
結果のマークアップは次のとおりです。
extract-text-webpack-plugin
とのドキュメントを検索しましたhtml-webpack-plugin
が、何も得られませんでした。ローカル スタイルをサードパーティ スタイルでオーバーライドする方法を知っている人はいますか?
もう少し背景として、私の CSS 構成は次のようになります。
HtmlWebpackPlugin も使用しています。