問題タブ [css-loader]

私の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

css ファイルのセット (react コンポーネントごとに 1 つ) を持つプロジェクトがあります。私は、webpack と postcss-cssnext で css-loader (モジュールをオン) を使用しています。

variables.css理想的には、css ファイル間で変数を共有できるように単一が必要です。私はvariables.css次のようなものを含めてみました:

それをインポートして、cssローダーを通過します。問題は、他のファイルがこれらの変数を取得しないため、これが機能しないか、何か間違っていることです (これをコンポーネント css ファイルに直接含めると機能します)。

機能することの 1 つはstyles.json、次の webpack セットアップを含むファイルを用意することです。

ただし、これに関する主な問題は、変数を変更するたびに、webpack dev サーバーを再起動する必要があることです (したがって、webpack 構成をリロードします)。これは理想的ではありません。

それで、これを行うためのより良い方法について何か考えはありますか？

反応プロジェクトにブートストラップをインポートしようとしましたが、機能しません。まず、このエラーが発生しました

そこで、npm で css-loader をインストールし、webpack.config.js を次のように更新しました。

今、私はこのエラーメッセージを受け取りました：

webpack.config.js を正しく構成する方法がわかりません。

誰でも私の問題に答えがありますか?

私は自分のプロジェクトで webpack と less-loader を使用しています。私の webpack 構成では、less ファイルで使用するグローバル変数を渡そうとしています。構成のその部分は以下のとおりです。

上記で参照している構成ファイルは、以下の json ファイルです。

staticDir以下は、このグローバル varを使用している less ファイル (file.less と呼びましょう) の一部です。

ただし、アセットをバンドルすると、次のエラーが発生します。

デバッグしようとしている 2 つのエラー:

• エラーによると、私の設定値https://myendpoint.comは次のように解析されますhttps:/myendpoint.com
• less-loader がエンドポイントを相対ディレクトリに解決しています

エンドポイントをより少ないファイルにハードコードすると、webpack はアセットを適切にバンドルします。

最後の注意: とバンドルするとエラーが発生するため、設定staticDirで を設定しました。"'https://myendpoint.com'""https://myendpoint.com"Module build failed: Unrecognised input