問題タブ [webpack-style-loader]

モジュールを追加して CSS を別のファイルにエクスポートするように、 React Hot Loader ボイラープレート を変更しました。webpack.config.js

プラグインと同様に：

参照用の完全なwebpack.config ファイルを次に示します。app.cssを実行すると正しくエクスポートされwebpackますが、開発用のホット リロード機能が無効になります。モジュールを次のように戻すと:

ホットリロードは正常に機能します (調整された webpack.config )。

開発中と運用準備完了コードのエクスポート中に、これら 2 つを簡単に切り替えるための最適なセットアップは何ですか? 私の考えでは、npm start( を呼び出すだけでnode server.js) を使用して自動的に開発モードを使用し、次に実行するwebpackかwebpack -p、自動的に本番環境を使用できれば、それが理想的です。

私が開発しているReactアプリケーションを同形にしようとしています。これを行う際の既知の問題の 1 つは、webpack ローダーがimport/requireCSS ファイルなどの非 JavaScript アセットを許可することです。例えば

babel-registerExpress でアプリケーションを構築する場合、ノードはこのインポートに到達し、CSS ファイルを処理できないため失敗します。JavaScript のみを想定しています (そしてJSXのおかげです)。

これを回避する方法の 1 つはtarget: 'node'、サーバー アプリケーション (同形アプリであるため、コンポーネントなどのすべての共通部分を含む) をビルドするときに webpack のオプションを使用して、サーバー側のコードをビルドすることです。これにより、server.jsノードで実行できるビルドが作成されます。

注: この特定の問題を回避する方法が他にもあることは知っています ( import/requireJavaScript 以外のものを含めないようにするなど)。ただし、このアプリケーションの開発のこの段階では実用的ではありません。

問題は、スタイルローダーがwindowノード環境に明らかに存在しないものを利用することです。

ここからスタイルローダーで。

私はこの仕事をするのに非常に近いと感じているので、どんな考えでも大歓迎です.

次の webpack 構成を使用して、エントリ ポイント entry.js で css を縮小しようとしています。entry.js には require('mystyles.css') しかありません

mystyles.css には次の css があります

webpackを実行すると、次のエラーが発生します

すべての .css ファイルを単一の styles.css ファイルにするために使用する必要があるローダーを教えてください

webpack を使用して scss ファイルを読み込む際に問題が発生しています。

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

これは私のwebpack構成ファイルです:

これは main.scss です:

そして、次のように App.js エントリ ポイントにファイルをインポートします。

任意のヒント？