問題タブ [css-modules]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - webpack + css コンポーネントを使用する場合のベンダー css のインポート
React および css モジュールでfont-awesomeやfoundationなどを使用しようとしていますが、プロジェクトに適切にインポートする方法がわかりません。
単一の css ファイルを取得するためにHotModuleReplacementPluginandを使用していることに注意してください。ExtractTextPlugin
トップレベルのコンポーネントのcssファイルのどこかでできるようにしたい@import 'font-awesome';のですが、ファイルがそのまま扱われ、クラスがローカライズされないようにするにはどうすればよいfont_awesome__fa-checkですか?
これは私のwebpack構成です:
ありがとう。
css - css モジュールを使用して、コンポーズを使用して色の変数のリストを含めるにはどうすればよいですか
私はcss モジュールとpost-cssを使用しています。post-css-simple-varsプラグインを追加しました
色.css
私のbutton.cssファイルで、構成を使用して変数を再利用するにはどうすればよいcolors.cssですか?
ボタン.css
css - 反応でcssモジュールを使用して、classNameを小道具としてコンポーネントに渡すにはどうすればよいですか
反応コンポーネントがあり、className を渡したい場合、CSS モジュールでこれを行うにはどうすればよいですか。現在、classNameのみを提供しますが、取得するハッシュ生成されたcssモジュール名は提供しません
<div className={styles.tile + ' ' + styles.blue}>
ここに私のTile.jsコンポーネントがあります
タイル.css
ご覧のとおり、作成者のタイルで次のようにこのタイル ラッパー コンポーネントを初期化しますが、色の小道具をコンポーネントに渡したいと考えています。
AuthorTile.js
reactjs - PostCSS / CSS モジュールを使用したグローバル ユーティリティ クラス
CSS Modulesを使用して、スタイル宣言を複製せずにグローバル ユーティリティ クラスを複数の要素に適用するにはどうすればよいですか?
たとえば、これは CSS モジュールのない React コンポーネントです。関連する行は、次のdiv2 つのクラスを持つ です: widgetand clearfix...
.clearfixアプリ全体の多くの要素に適用したいグローバル ユーティリティ クラスです。
CSS モジュールにインポートするさまざまな方法を見てきまし.clearfixたが、いずれの場合も、クラスが適用されるたびにスタイル宣言が再定義されます。一例を次に示します。
reactjs - CSSモジュール構成
作曲について質問があります。誰かが私を助けてくれることを願っています。私はreact-css-modulesSass を使用していますが、基本的な最下位レベルのコンポーネントの 1 つを構成するための最良の方法を知りたいです。
コンポーネントは次のとおりです。
これまでのスタイルシートは次のとおりです。
今のところ、かなり痛いです。追加するすべての構成可能な props は、提供する必要がある構成されたクラスの数を指数関数的に増加させます。現在、 と を構成できますalign。typeどちらも null になる可能性があるため、可能な組み合わせは 6 つあります。つまり、 base に加えて 5 つの合成クラスを作成する必要があります.button。もう 1 つだけ props を追加した場合、たとえば boolean だけを追加した場合bold、新しい合成クラス名を大量に追加する必要があります.button-bold, .button-left-bold, .button-right-bold, .button-primary-bold, .button-primary-left-bold, .button-primary-right-bold。
要素に適用する複数のモジュールを指定できるようreact-css-modulesに設定を有効にするだけでよいことはわかっていますが、それはベスト プラクティスに反していると理解しています。ここで何かが欠けているようallowMultipleに感じます。私たちは何を間違っていますか？
javascript - Webpackを使用してサブモジュールからcssインポートを抽出するにはどうすればよいですか?
webpackと を使用して、複数のエントリを持つ React アプリケーションを作成しようとしていますextract-text-webpack-plugin。
私の設定ファイルは次のようになります。
私の問題はextract-text-webpack-plugin、エントリ チャンクのサブモジュールからではなく、エントリ チャンクからインポートされた css ファイルのみが含まれていることです。
だからもしapp.entry.js持っているなら
のスタイルapp-style.cssはバンドルされますが、 のスタイルはバンドルされませんsub-style.css。
エントリ ファイルが 1 つしかないときは、この問題は発生したことがないので、複数のエントリを作成するには別の設定が必要になるのでしょうか?
考慮すべきことは、使用方法による CSSModules の使用ですcss-loader。これも要因になる可能性があります。
何か案は？