問題タブ [webpack-style-loader]
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.
intellij-idea - Webpack が Intellij Idea で保存された変更を検出できないことがある
Intellij Idea で JavaScript/React アプリケーションを開発しておりwebpack-dev-server、ファイルを段階的にビルドするために使用しています。これは、開発サーバーがファイルを監視していて、ファイルが変更された場合にwebpack再構築することを意味します。かなり標準的なシナリオ。
残念ながら、webpack特定のファイルを無視することがあります。必要なだけ変更できますが、webpack何もしません。ファイルが無視されるパターンを特定できませんでした。それは任意です。時々、新しいファイルを作成してwebpack無視することがあります。
興味深いのは、Intellij Idea を使用して保存を実行した場合にのみ発生することです。ファイルを別のエディター (vim など) で開いて保存すると、ファイルが正しく再構築されます。実際、touch file.js再構築をトリガーするには単純で十分です。
Intellij Idea がファイルを保存する方法に問題があると思います。何か案は？
angular - Angular2/Webpack:cssファイル内にインポートされたフォントをロードする方法は?
Angular2 beta.15 と webpack 1.12.14 を使用しています。
app.component.tsこのようなグローバル パターンとして、1 つの .css ファイルと 1 つの .scss ファイルがあります。
そして、.cssファイル内で、以下のようにいくつかのフォントがインポートされます。
には、以下のような、、およびフォントのwebpack.config.jsローダーがあります.css.scss
を実行したときwebpack -display-error-detailsはまったくエラーはありませんが、サーバーを起動してアプリを実行すると、次のようなエラーが発生しました
CSSローダーを次のように変更すると
これらの例外はなくなり、アプリは起動しましたが、ブラウザーのコンソールでこれらのフォントに対して 404 要求エラーが発生し、まったく読み込まれていません。それで、私にいくつかの指針を教えてもらえますか？ローダーの設定に問題があると思われます。
webpack - 複数のエントリ ポイントでの Webpack URL ローダー コンテキスト エラー
アセットを CSS にロードしようとしていますが、場合によっては (大きなファイル)、特定のディレクトリにコピーします。URL ローダーを使用し、名前テンプレートのクエリ パラメータを定義すると、次のエラーが発生します。
エラー: パス変数 [name] はこのコンテキストで実装されていません: [path][name].[ext]?7770f0c15c5bc5d8291a
出力が定義された複数のエントリ ポイントを使用していますが、それが問題かどうかはわかりません。コンテキストを強制する方法はありますか? 以下のWebpack構成。
これは私のファイル構造です：
css - Webpack でスタイルシートを複数のファイルに分割する
ビルド システムとして Webpack を使用しており、単一の大きなスタイルシートを複数のチャンクに分割する実験を行っています。
現在、別のエントリ ポイントを作成することでこれを行っていますが、これにより問題が発生します。多くのインポートを複製する必要があること。これにより、断片化されたスパゲッティのような依存関係グラフが発生し、必要な共有コンテキストが失われます。
理想的には、単一のエントリ ポイントに固執し、単一の大きなスタイルシートをコンパイルしてから分割するのがよいでしょう。
たとえば、次の単一のエントリ ポイント main.scss があるとします。
2 つのスタイルシートをコンパイルします。critical.css と main.css
css - css を同期するために Webpack でホット スタイル ローダーを有効にするための構成
Webpack でホット スタイル ローダーを有効にしようとしていますが、適切な構成が見つかりません。これが私のwebpack.config.jsです：
そして私のpackage.jsファイル：
しかし、どのように構成しても、ホット シンクが機能しません (.css ファイルの場合、.js ファイルの場合は正常に機能します)。誰かが私にそうする正しい方法を教えてもらえますか?
webpack - javascriptが無効になっているときにcssのローダーを使用する - webpack
私の webpack config で style-loader と css-loader を使用すると、以下は私の webpack.config.js からの抜粋です
JS が無効になっている場合、スタイルがドキュメントに書き込まれていない<head>ため、ページがプレーン テキストとしてレンダリングされていることがわかります。
掘り下げてみると、 extract-text-webpack-pluginについて聞いたことがあり、構成を少し変更することで *.css ファイルを 1 つにまとめapp.cssて効果的に読み込むことができました。
質問 ：
- JS が無効になっている場合、style-loader または css-loader のいずれかがスタイル チャンクを先頭に書き込むことができないと想定するのは正しいですか?
- このシナリオでは、extract-text-webpack-plugin を使用することは有効な解決策ですか?
- そのようなシナリオで CSS をロードする他の方法はありますか?
PS : webpack から始めたばかりなので、 webpack.config.js に明らかな問題がある場合は指摘してください。
css - webpack を使用してフォントと CSS を分離する
私が達成しようとしているのは、フォントを使用して .less を .css ファイルに抽出し、それぞれを次のように別々のディレクトリに配置することです。
しかし重要なのは、css ファイルが同じレベルの fonts ディレクトリを示しているということです。
スタイル.css
webpack.config.js
lib/parts.js
どんな助けでも感謝します。
javascript - Webpackがcssファイルを構築していません
そのため、 http: //webpack.github.io/docs/tutorials/getting-started/ のチュートリアルに従っていましたが、css スタイル ローダーのステップで行き詰まりました。ここに私のentry.jsがあります：
これは content.js です:
これはstyle.cssです：
この後、次のコマンドを実行しています。
webpack ./entry.js bundle.js
このエラーが発生しています：
バージョン: webpack 1.13.0 時間: 866ms アセット サイズ チャンク チャンク名 bundle.js 10.1 kB 0 [発行] メイン [0] ./entry.js 115 バイト {0} [ビルド] [4] ./content.js 45 バイト{0} [ビルド済み] + 3 つの隠しモジュール
./~/css-loader!./style.css モジュールのビルドに失敗しました: ReferenceError: Promise が LazyResult.async で定義されていません (/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib /lazy-result.js:157:31) で LazyResult.then (/var/www/html/webpack/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:79:21) で processCss ( /var/www/html/webpack/node_modules/css-loader/lib/processCss.js:198:5) Object.module.exports (/var/www/html/webpack/node_modules/css-loader/lib/loader) .js:24:2) @ ./~/style-loader!./~/css-loader!./style.css 4:14-73
これを修正する方法は？