問題タブ [webpack-style-loader]

webpack-dev-server 実行中のエラー

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

このプラグインを使用する前は、すべて正常に機能していました。css の別のバンドルを出力するつもりなので、この問題を修正する必要があります。

github で問題が見つかりましたが、役に立ちませんでした:

Webpack を使用するクライアント側アプリを作成していますが、materialize-css パッケージを要求する方法がわかりません。私はHenrik Joreteg の hjs-webpack パッケージを使用しています。これにより、sass ファイル (例@import 'yeticss') でインポートを行うことにより、yeticss npm パッケージが含まれますが、これはマテリアライズでは機能しません。import 'materialize-css'他のパッケージのようにコード (JS ファイルなど) で直接要求しても機能しません。

私の webpack セットアップは外部 css ファイルを生成しません。ただし、.js は問題なくバンドルされます。ExtractTextPlugin を使用していますが、まだ機能していません。エラーは生成されません。どんな助けでも大歓迎です！:-)

これが私のwebpack.config.jsです

Package.json 開発者の依存関係

フォルダ構造:

React コンポーネントを使用した CSS の現在のプラクティスは、webpack の style-loader を使用してページにロードしているようです。

これにより、style-loader は<style>要素を DOM に挿入します。ただし、<style>は仮想 DOM には含まれないため、サーバー側のレンダリングを行う場合、<style>は省略されます。これにより、ページにFOUCが発生します。

サーバー側とクライアント側の両方で動作するCSS モジュールをロードする他の方法はありますか?

私はwebpackを初めて使用し、ローダーと、テスト、ローダー、インクルードなどのプロパティを理解しようとしています.

これは、Google で見つけた webpack.config.js のサンプル スニペットです。

1. テスト: /.js$/ は、拡張子が .js のファイルにのみ使用されますか?

2. ローダー: 'babel-loader' は、npm を使用してインストールするローダーです。

3. インクルード：これについて多くの質問があります。配列の中に入れたものは何でもトランスパイルされるというのは正しいですか? つまり、index.js、config.js、および lib、app、src 内のすべての *.js ファイルがトランスパイルされます。

4. インクルードに関するその他の質問: ファイルがトランスパイルされると、*.js ファイルは 1 つの大きなファイルに連結されますか?

5. 除外は自明だと思います。トランスパイルされません。

6. query: { presets: ['es2015'] } は何をしますか?

反応アプリをスタイリングしています。私はwebpackでcss-modulesを使用しています。これが私の設定です：

コンポーネントのスタイルを設定し、コーヒーを作りましたが、動作しません。だから私は使用したいスタイルシートを持っています。私はそれをインポートしています：

しかし、コンポーネントの内部を壊すと、styles定義されていません。私のスタイルはどれも現在適用されていません。これが私がそれをどのように使用しているかの例です:

なぜstyles空になるのですか？

このチュートリアルに従うことで、

https://github.com/christianalfoni/react-webpack-cookbook/wiki/Loading-CSS#component-specific

このロジックを実装しようとしましたが、これが実装方法です。

これは、Web上でレンダリングされる方法です。

問題が見られるように、クラス名が「.app-components-navbar-navbar-navbar-wrapper」としてレンダリングされるため、css は navbar クラスに適用されません。ただし、クラス名は「navbar-wrapper」にする必要があります

1. これを解決するには？
2. これはどのように機能するはずですか？
3. コンポーネント固有の CSS を実現するにはどうすればよいですか?

2 つのレイアウト (LayoutWithShortHeader、TestLayout) とそのようなルートがあります。

/ddd を開くと、ページは内部に TestPage を含む TestLayout で構成されます。残念ながら、LayoutWithShortHeader (import './layout.sass'; LayoutWithShortHeader 内) のスタイルがあり、その理由はわかりません。

TestLayout.jsx:

Webpack 構成:

webpack.common.config.js:

webpack.config.js: 'use strict';

では、あるレイアウトのスタイルを別のレイアウトのスタイルから分離するにはどうすればよいでしょうか?

これが私の超単純なscssファイルです：

この方法で App.jsx ファイルにインポートしています。import "./App.scss";

これは私のモジュールにあるものです:loaders:

しかし、すばらしいことが起こる代わりに、コンソールに次のように表示されます。

これは非常にひどいです。それが役立つ場合は、ここで github にコードを投げました。これまでのところ、それを機能させるには運がありませんでした。私はさまざまなスタイルなどを試しましたが、何もしませんでした。