以下を使用して静的反応SPAを作成するノードプロジェクトがあります。

• 反応ルーター
• 戻ってきた
• ポストカード
• 反応-css-モジュール

現在、グローバル css ファイルと各コンポーネントのモジュラー css に読み込まれます。開始時に、「theme-1」または「theme-2」となるグローバル テーマ変数をフェッチします。テーマ変数の値に基づいて、同じ名前だが異なるディレクトリ パスの異なる css ファイルをロードしたい、例:

テーマが「theme-1」の場合、「/css/themes/ theme1 /Component.css」をインポートします。Else テーマが「theme-2」の場合、「/css/themes/ theme2 /Component.css」をインポートします。

これを達成する方法はありますか？

私が見る限り、モジュールのインポートは if/else ステートメントでラップできないことに注意してください。

PostCSS precss プラグインを使用した次の CSS 宣言があります。

しかし、何らかの理由で、.woocommerceルールは適用されていません。理由は何か？有効なセレクタであることはわかっています。いじり始めて他の宣言をいくつか削除すると、実際には機能するからです。

このようにすべてのルールを手動で展開すると、すべてが正常に機能することに注意してください。したがって、ネスティングの問題です。

リクエストに応じて、ここにいくつかの HTML があります。html はたくさんあるので、基本的なものを示します...

postcssファイルにこのコードがあります

まあ、これは for ループを使用することで短縮できると思いました

しかし、問題がありました。$graph_$iのように解決できず$graph_1、 のままでした$graph_$i。

この状況の良い解決策はありますか?

次のようなGulp Autoprefixerスタンドアロンを使用Gulpしています。

...しかし、次のような非gulp autoprefixerの使用をラップしているように見えるGulp Postcssプラグインが表示されます。

違いはなんですか？

こんにちは、私は PostCSS を試していて、特定の CSS プロパティを見つけたときに新しいルールを追加するプラグインの作成に少し苦労しています。

私が達成しようとしていること…</p>

CSS の開始:

PostCSS プラグインの後:

これらのいずれかが表示されるたびに、新しいルールを追加するのは簡単ですnot-yet-standard-property-*…</p>

しかし、出力は理想的ではありません…</p>

理想的には、新しいルールはルール全体を通過した後に一度だけ追加されますが、PostCSS は walkRules 関数内で条件を許可していないようです。 .

上記のコードのデモにリンクしました。前に言ったように、より良いアーキテクチャの提案は大歓迎です。私はこれにかなり慣れていません。ありがとう！

デモ

編集：解決しました。Andrey Sitnik に感謝します。その中の概念が私が必要としていたものだったので、私は彼の答えを正しいとマークしました。これに対する完全な解決策を探している人は、次のコード (およびデモ!) を参照してください。

ソリューションのデモ