問題タブ [webpack-style-loader]

webpackローダー配列にこのローダーがあります：

Webpack で SCSS を CSS にビルドしようとしていますが、次のエラーが発生します。

ここに私の完全なwebpack構成があります:

現在、さまざまなフロントエンド テーマを使用するアプリケーションを開発しています。これらのテーマは、ユーザーが選択できる単純な CSS ファイルです。

技術的には、これらのテーマは .scss ファイルであり、webpack によってコンパイルされ、angular の標準的なリンク タグを介してロードされます。

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

削除された webpack 構成は次のようになります。

extractTextPlugin は HMR をサポートしていないため、ホット モジュール交換 (HMR) 機能を有効にして webpack-dev-server を使用するまで、これは完全に正常に機能します。単純に extractTextPlugin (options.disable) を無効にするか、それらを削除すると、すべてのテーマがメイン モジュールにコンパイルされます。もちろん、すべてが一緒に適用されるため、テーマが壊れます。

extractTextPlugin を使用せずにこれらの CSS ファイルを webpack で直接生成するにはどうすればよいですか? さまざまなエントリ/チャンク、ファイルローダーなどでさまざまな試みを試みましたが、実際には何も機能しません。

簡単にする必要があります。ExtractTextPlugin を使用せずに、SCSS ファイルから静的 CSS ファイルを JS ファイルに変換せずに生成します。

誰かが私を正しい方向に向けることができれば、それは素晴らしいことです.

私のapp.scss

実行時の出力エラー./node_modules/.bin/webpack

じぶんのwebpack.config

と私app.js

反応コンポーネントがあり、className を渡したい場合、CSS モジュールでこれを行うにはどうすればよいですか。現在、classNameのみを提供しますが、取得するハッシュ生成されたcssモジュール名は提供しません <div className={styles.tile + ' ' + styles.blue}>

ここに私のTile.jsコンポーネントがあります

タイル.css

ご覧のとおり、作成者のタイルで次のようにこのタイル ラッパー コンポーネントを初期化しますが、色の小道具をコンポーネントに渡したいと考えています。

AuthorTile.js

2 つの質問があります。

1) CSS ローダーとスタイル ローダーは、2 つの webpack ローダーです。両者の違いが理解できませんでした。両方とも同じ仕事をしているのに、なぜ 2 つのローダーを使用しなければならないのですか?

2) 上記の Readme.md ファイルに記載されている .useable.less および .useable.css とは何ですか?

私の webpack 構成ではurl-loader、 を使用してフォントをロードするように指定されています。Chrome を使用してページを表示しようとすると、次のエラーが表示されます。

私の構成の関連部分は次のようになります。

Safari では発生せず、Firefox も試していません。

開発中はファイルを提供していますがwebpack-dev-server、本番環境ではファイルがディスクに書き込まれ、S3 にコピーされます。どちらの場合も、Chrome で同じ動作が得られます。

これは、より大きな画像でも発生します (画像ローダー構成の 10kB 制限を超えています)。

そこで、ファイルの数が少ないテーマをダウンロードしましたが、他のファイルを正しい順序でインポートするメインのテーマがあります。任意の .less ファイルを監視する gulp ファイルが付属していましたが、他のすべてをインポートするファイルのみを再コンパイルします。次のようになります。

これまでの私の webpackconfig は次のようになります。

私は同じことを達成しようとしていますが、webpackを使用しています。ガイドにあるように、less-loader をインストールしてセットアップしましたが、すべてのファイルをコンパイルしようとします。任意のファイルを監視するが特定のファイルのみをコンパイルする gulp ファイルのように設定する方法はありますか? フェニックスで作業しているときにブランチでこれを機能させていますが、フェニックスのwebpackでブランチを切り替えようとしています。

ブランチでは、少ないファイルを含むフォルダーを無視するように指示し、メインの少ないファイルをそのディレクトリの外に置いて、ブランチがメインの少ないファイルのみをコンパイルし、他のファイルをインポートするようにしました。

大きな AngularJS があり、Grunt から webpack に移行しようとしています。プロジェクトの構造を変更することはできませんが、現在の構造では、より少ないファイルから画像をロードする際に問題が発生しました。webpackは、ファイルが少ないサブフォルダー（スタイル/コンポーネント）から画像をロードしようとするため、画像パスを相対パスから絶対パスに置き換える必要があると思います。

それは私のwebpack構成です:

そして、エントリファイル（app/scripts/bootstrap.js）には次のものがあります：

しかし、開発サーバーを実行しようとすると、次のエラーが発生します。

すべての少ないファイルを書き換えずにエラーを修正するにはどうすればよいですか?

私のプロジェクト構造

そしてスタイルの一部app/styles/components/commom.less：