問題タブ [webpack-style-loader]

webpack と reactjs を使用してアプリケーションを作成しました。これまでに 2 つのページを作成しました。両方のページに CSS スタイルを定義しました。しかし、ページ 1 をロードした後にページ 2 をロードすると、ページ 1 のスタイルがページ 2 のスタイルと干渉しています。

例えば

ページ1

style1.css

ページ2

style2.css

page1 の後に page2 が読み込まれると、span の色は page1 のスタイルから読み込まれた赤でした。この種の干渉を回避する方法はありますか、それともここで何か間違ったことをしていますか?

私は、webpack と反応フレームワークで style-loader を使用しています。ターミナルで webpack を実行するとModule not found: Error: Cannot resolve module 'style-loader'、ファイル パスを正しく指定したにもかかわらず、import.js ファイルが表示されます。

webpack.config.js:

react-slingshot start kitでアプリを起動しています。node_modules normalize.css と react-toolbox からロードしたかったのですが、ビルド中に次のエラーが発生しました:

これは私のindex.jsです：

そして、これは私の webpack.config.js です // このファイルに関する情報については、webpack と webpack-hot-middleware のドキュメントを参照してください // 環境ごとに webpack.config.js をハードコーディングするのではなく、 // このファイルは webpack 構成を生成しますgetConfig メソッドに渡される環境用。「webpack」から webpack をインポートします。「パス」からパスをインポートします。「extract-text-webpack-plugin」から ExtractTextPlugin をインポートします。

何が問題なのですか？ありがとう。

Webpackを使用してモジュールをバンドルし、sassを使用して反応ベースのアプリケーションでスタイルを設定しています。

別のスタイルシートを使用して、コンポーネントの背景画像を設定し、そのスタイルシートを にロードしましたindex.js。style-sheet のすべてのスタイルは、background image を除いてそのコンポーネントに適用されます。

これが私のサンプルスタイルシートです

この問題を解決する 1 つの方法は、画像を明示的に要求してから、反応コンポーネントのインライン スタイルを作成することです。

しかし、各画像を個別に要求するのではなく、スタイルシートが読み込まれるとすぐに、画像フォルダーからすべての画像を読み込みたいです。

私のwebpack構成ファイルは

私はいくつかの些細な点を見逃しているかもしれません。どんな助けでも大歓迎です。

次のような「variable.less」というファイルにLESS変数があります。

その変数を別のLESSファイルにインポートして、次のように使用しようとしています:

これにより、次のエラーが表示されます。

期待された ')' が '+' を取得しました

これを適切に行う方法は？

webpack を再構成しようとしていますが、css ファイルを読み込めません。スタイルを src > styles > main.css に保存します

次のようなエラーが発生しています

これが私のwebpack構成です

以下はpackage.jsonです

私は NODE_ENV を sass ファイルに挿入しようとしているので、dev/prod env に対して異なる出力を持つことができ、その中にそのような条件を持つ sass 関数を持つことができます: @if (NODE_ENV == 'prod') {}

私のwebpack.configは次のようになります：

ローダーにデータ パラメータを渡そうとしましたが、うまくいきませんでした。どんな助けにも感謝します！

次の Webpack 構成があります (大まかに言えば、この投稿用に単純化されています)。

これで、scss ファイルで通常参照される画像に対しては問題なく動作します。

ただし、ディレクティブを使用すると機能しません。:local

rootそして、それは が CSS ローダー用に定義されているためだと思います。ビルド エラーが発生します。Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

代わりに css-loader 構成から削除するrootと、問題なくビルドされますが、パスは Chrome のインスペクターで正しく「見えます」が、実際に新しいタブでリンクを開くと、次のようになります:chrome-devtools://devtools/bundled/"/images/bg.png"明らかに正しく解決されません.

url-loader問題が構成にあるのか、それとも正確に何が起こっているのかはわかりません。

resolve.root、resolve.modulesDirectoriesなどを指定するためにさまざまなwebpack構成をいじってみましたが、それらが影響を与えているのか、それとも完全に間違っているのかはまったくわかりません。私も出くわしましresolve-url-loaderたが、それが私が必要としているものであるかどうかはわかりません。

何か案は？MTIA！

アップデート

Safariでは正常に機能しますが、Chromeでは機能しないことに注意してください。Chrome 固有のバグのように思えますが、すべての開発を Safari で行うのは現実的ではありません。

また、この問題を修正すると主張する style-loader のフォークであるvue-style-loaderにも出会いましたが、それを修正する方法は、ハックな非推奨のエスケープ/ウンエスケープ メソッドに依存することです。