問題タブ [css-modules]

派生ファイルを webpack ファイルシステム キャッシュに追加するローダーを作成しようとしています。

大まかに言うと、CSS クラスの TypeScript 型定義ファイルを生成する CSS ローダーがあります。CSSモジュール用にこれらのファイルを生成しているので、このローダーはローダーの順序の真ん中にあります。

を使用してこれらのファイルを書き込むことができますfsが、次に webpack が実行されるまで、TypeScript ローダーはファイルを認識しません。これにより、TS は初めてエラーをスローします。

ローダーに webpack のファイルシステム キャッシュを変更させるにはどうすればよいですか?

現在、React と CSS モジュールを使用する大規模なプロジェクトに取り組んでいます。リスト項目の束に「react-anything-sortable」を実装したいと考えています。

これまでのところ、「react-anything-sortable」が「react-anything-component」内の子に次のクラスを追加するため、実装は停止しています: .ui-sortable、.ui-sortable-item、.ui-draggableおよび .ui-sortable-placeholder。これらは、どのDOM要素がドラッグ、配置などされているかを認識するために「react-anything-sortable」に渡されるクラスであると思います.

次のように .scss ファイルを参照して、List コンポーネントのスタイルをインポートします。

コンポーネントでスタイルを使用するには、styles.CLASS を追加してクラスを使用する必要があります。

したがって、'react-anything-sortable' によって配置される .ui-sortable は、.styles を追加しないため、スタイルシートを参照する方法がないことは理解できます。

他の div 要素が「ハッシュ化された」className (それぞれの css モジュール内のクラスが見つかったことを示す) を持つ方法を簡単に確認できますが、ui-sortable を持つ div にはクラスしかありませんが、.scss ファイルにアクセスする方法はありません。 .ui-sortable のスタイル プロパティを含む

これを修正するにはどうすればよいですか?

編集：これが私がそれを実装している方法です

WidgetList.js:

WidgetList.scss

私のアプリケーションには、複数のテーマ スタイルがあります (それらは異なる個別の CSS スタイル ファイルと考えることができます)。importCSS モジュールの使用を開始したいのですが、最初のファイルの作成方法さえわかりません。

次の（単純な）ディレクトリ構造を想定してみましょう。

ユーザー設定に応じて、別の CSS を選択したいと考えています。これは、ブラウザー (またはサーバー上) で簡単に実行できます。しかし、どうすれば myComponent.css を myComponent.js に含めることができるでしょうか?

CSS モジュールによると、import使用しているファイルを使用する必要があります。だからimport styles from 'theme/myComponent.css。問題は、私が真のテーマを 1 つ持っているのではなく、3 つの異なる並行したテーマを持っていることです。

CSSモジュールを使用する場合、複数のレイアウト/テーマで作業することさえ可能ですか?

webpack ビルドで css モジュールをコンパイルする方法はありますが、javascript はまったくコンパイルしませんか? css-modules を使用する反応コンポーネントを公開したいのですが、ソース ファイルをエントリ ポイント (トランスパイルされていない JavaScript) としてポイントします。ただし、css-modules をコンパイルしないと、そのコンポーネントを使用する人は、css-modules ローダーも使用しない限り、そのコンポーネントを使用できなくなります。このようなことはwebpackでも可能ですか、それともこれを行うライブラリが存在しますか?

インライン テンプレートを使用せずに、CSS モジュールを Angular 2 で動作させようとしています。公式のスタイル ガイドでは、3 行以上のマークアップがある場合はインライン テンプレートを使用しないことも提案しています。したがって、私の考えは と の組み合わせを使用することでしlodash-templatesたfile-loaderが、 の出力がlodash-template-loaderによって受け入れられるかどうかはわかりませんfile-loader。これは、コンポーネントを次のように見せたい方法です。

の出力、lodash-template-loaderたとえばejs-loaderは、テンプレートのコンパイルに使用されるデータで呼び出す必要がある関数であるため、これが機能しないことはわかっています。stylesテンプレート内でを使用したい場合は、次のようにします。

ejs-loaderしたがって、基本的には、たとえばこれを使用してコンパイルし、それをにパイプして、file-loader個別の html ファイルを取得したいと考えています。これを達成する方法がわかりません。上記は単なるアイデアですが、ステートメントfile-loaderだけでは機能しないため、テンプレートをコンパイルしてパイプする方法がわかりません。require何か案は？

のドキュメントによるとejs-loader、テンプレートをコンパイルするには次のことを行う必要があります。

template関数はテンプレートを文字列として返すと思います。しかし、それから別の html を作成するにはどうすればよいでしょうか? 私も必要file-loaderですか？

編集

したがって、おそらく解決策は、ファイルとスタイル オブジェクトを受け取るカスタム ローダーを実装することです。次に、ローダーは、に渡すことができる出力を返しますfile-loader。ここでの問題は、スタイル オブジェクトをローダーに渡す方法です。filer-loaderまた、テンプレート文字列を読み取り可能な形式に変換する方法は?