問題タブ [webpack-style-loader]

私の問題は、output.publicPath 構成オプションで完全なドメインを指定しない場合です。URLが正しく読み込まれません（少なくともフォント）。

私のwebpack構成:

私は以下のファイルを持っています：

私のサーバーはhttp://localhost:5000にあります。

クロムでのデバッグ中に生成された CSS を確認すると、次のように置き換えられていることがわかります。

どちらが正しいようです！Chrome 開発ツールはエラーを報告します: 「ダウンロードしたフォントのデコードに失敗しました: http://localhost:5000/widgets/damian/9789/en」私がhtmlを提供している私の現在の場所。そして、なぜそのURLからフォントを取得しようとしているのかわかりません。

http : //localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot にアクセスした場合。できます。

publicPath を「http://localhost:5000/assets/」に変更すると、すべてが解決されます。しかし、それは私が避けたいことであり、いずれにせよ、なぜこれが起こるのかを理解したい.

私の推測では、スタイルローダーが CSS を Blob として追加するため、css は「現在のドメイン」の概念を失うため、ドメインが含まれていない URL は奇妙に動作します。

しかし同時に、これは CSS で webpack を使用するすべての人に発生するはずであり、それについてのコメントは見たことがありません。:S

ありがとう！！！

Webpack を使用して、Angular js コードをバンドルしています。ただし、モカ ベースの単体テスト ケースを作成できません。bcz gulp-mocha は css の「要求」に失敗しています。以下は、詳細のコード スニペットです。

Benefits.js angular js ディレクティブ:

Benefits_test.js は単体テスト ケース ファイルです。

次のエラーが表示されます

失敗した bcz gulp-mocha が「css」ファイルを理解できないことを理解しています。テストケースを書くにはどうすればよいですか？require(./../benefits.css)" " をディレクティブ コードの外に移動する必要がありますか?

すべての依存関係を同じディレクティブ コードに保持したい (webpack を使用)。助けてください

私たちは、 webpackを使用して JS および CSS アセットをバンドルするアプリケーションで este.js 開発スタックを使用しています。Webpackはwebpack.optimize.UglifyJsPlugin、本番環境用にビルドするときに使用するように構成されておりstylus-loader、本番環境用の正確なローダー構成です。以下のとおりであります：

次に、3 つの styl ファイルがあります。

プロダクション ビルドの後、両方のキーフレーム アニメーションの名前が に変更されa(おそらく による CSS 縮小) 、同じ名前で縮小後の優先度が高いため、オーバーライドcss-cleanを推測できます。fadeInarrowBounce

ファイルはcomponents/component1.styl、次のステートメントを使用components/component2.stylして React コンポーネント ファイルに含まれています。[name].react.js

私は気が狂います。多くの異なる解決策を試しましたが、実際に機能するものはありませんでした。

スタイルシート用のかなり複雑なローダー設定があります。

これはうまく機能しますが、一部の要件では、css-loader にオプションを追加する必要があるmodulesため、次のようになります。

しかし、私はこれをすべての場所で行うことはできません。

css-loader モジュール フラグを特定の要件で有効にしながら、残りの部分を同じに保つには、どうすればこれを構成できますか?

ローダーの「エイリアス」のようなものかもしれませrequire('./foo.scss!my-scss-with-modules-flag-alias')ん。

私が考えることができる唯一の解決策は、ローダー構成を特定のrequire呼び出しにインライン化する構文変換を行うローダーを作成することです...しかし、それは脆弱で複雑です。