問題タブ [react-css-modules]

react-css-modules、webpack、およびHot Module Replacementを使用して React プロジェクトをセットアップしようとしています。すべてが魅力的に機能していますが、CSS ソースマップを機能させることができません。

このガイドに従って、HMR を機能させました。これには、Webpack が css ファイルをディスクに書き込んだ後に css ファイルを更新するための BrowserSync セットアップが含まれます。

私は（react-css-modulesで提案されているように）ExtractTextPluginすべてのcssを抽出するために使用します：

しかし、ここで提案されているように、これをソースマップに変更すると

"root" CSS module is undefined.ブラウザのコンソールに次のエラーが表示されます。

サンプル リポジトリはこちらにありますが、開発に使用している完全な webpack 構成は次のとおりです。

ソースマップを機能させるには?

Typescript で書かれた React アプリケーションで、webpack の 'modules' オプションを指定して css-loader を使用したいと考えています。この例は私の出発点でした (Babel、webpack、React を使用しています)。

webpack構成

これは、付属の CSS ファイルでスタイルを設定したい React コンポーネントです。

ツリー.css

私が何をしていても (インポート構文を変更しようとしたり、ここで説明されている ts-loader の「require」を宣言しようとしたりしましたが、常に次のようになります:

キャッチされないエラー: モジュール "../../../css/tree.css" が見つかりません

実行時と

エラー TS2307: モジュール '../../../css/tree.css' が見つかりません。

TSコンパイラによる。何が起こっていますか？css-loader は ICSS を発行していないように思えますか? それとも、ts-loader の動作が間違っていますか?

編集: Meteor 1.3 リリースが出ており、 Webpack なしで CSS モジュールを直接使用できるnpm パッケージがリリースされようとしています。

NPM経由でMeteor 1.3でhttps://github.com/gajus/react-css-modulesを使用したいと思います。しかし、readme には Webpack を使用するように書かれています。Meteor と同じビルド ジョブを実行するように思われるため、Webpack を使用したことはありません。

この特定のケースで、Meteor 1.3 ベータ版で React Module CSS を使用する方法を知っていますか?

以下は私の Greeter.jsx ファイルです。

以下は私のmain.jsファイルです：

postcss-modules と react-css-modulesを使用して、コンポーネント内のセレクターを分離します。これにより、ファイルが読み込まれると、クラス名が _3lmHzYQ1tO8xPJFY8ewQax のようになります。

例：

以下は、react-bootstrap が出力を与える方法です。

styleName(react-css-modules) ではなく bsStyle (react-bootstrap) を使用しているため、分離されていないため、要素にブートストラップ css スタイルを適用できません。

postcss-modules が生成する出力と一致するようにクラスを分離することで、react-bootstrap を使用できる方法はありますか?

ありがとうございます。

以下の Webpack ビルドが与えられた場合、どのように CSS モジュールを統合できますか (Webpack config の下のリンクにある Web パックのリンクと例)。

CSSモジュールへのリンクは次のとおりです https://github.com/css-modules/webpack-demo

そして、これは例です：

次のシナリオを処理するモジュール式の方法は何ですか: アプリには、すべての見出しタグ (h1、h2、h3 など) の一般的なスタイルがあります。特定のコンポーネントである Widget.jsx は、これらの見出しのいずれかを使用できますが、h1 タグには特別なスタイルが設定されています。CSS の「昔」の時代には、これは (おそらく) 単一のスタイルシートの継承によって処理されていました。例えば

明らかに、上記は CSS へのモジュラー アプローチには適合しませんが、上記のシナリオをモジュールで実現する方法がわかりません。以下は、問題を解決するための私の最初の試みです。

Widget.jsx

_widget.less

原子/テキスト/_text.less

これは、変更されていない一般的なクラス ( .h2) の 1 つを使用するところまで機能します。明らかに、問題は で.h2定義されておらず_widget.less、これらのクラスの「グローバルな」定義がないことです (モジュラー CSS のベスト プラクティスに従って) が、他の見出しクラスを.h2, .h3, .h4 ...クラスに明示的に構成することは、どちらかで答える。例えば

_widget.less

別の潜在的な解決策は@import、一般的な見出しスタイルを_widget.lessファイルに追加することです。

_widget.less

_text.lessこのソリューションの問題点は、スタイルを利用して成果物コードを肥大化させるたびに、それらのスタイルが複製されることです。

この種の問題を解決する最善の方法について何か考えはありますか? 私はモジュラーCSSの概念に非常に慣れていません。