CSS カスタム プロパティを効果的に使用するにはどうすればよいですか?

Question

私は、アプリケーションが 10 個の Tailwind スタイルの色変数のセットを生成するために使用する原色をユーザーが選択できるようにするカスタム テーマ設定を備えたアプリケーションを開発しています。 JavaScript を使用して色を生成し、それらを dom に注入しますが、調査の結果、dom はコンパイルされた CSS にのみアクセスできるため、scss 変数を注入することはできないことがわかりました。そのため、scss 色の代わりに css カスタム プロパティを使用する必要がありました。

これが珍しい使用例であり、scss が色を扱う方法ではないことはわかっていますが、プロジェクトを書き直すのではなく、問題に対する効率的な解決策を見つけたいと考えています。

リーリー リーリー

コードは完璧に機能しましたが、main.scss ファイルが大きくなりすぎたので、7-1 アーキテクチャ パターンを使用してファイルを分割しました。移動するまで scss ファイルの残りの部分は正常に機能しました。周りのこの色。具体的には、カスタム カラーを含む HTML コンポーネントを abstracts/_colors.scss:

に移動しました。 リーリー

私が抱えている主な問題は、コンポーネントが次のようにこれらの変数にアクセスすることです:

リーリー

他のコンポーネントと同様に、abstracts/colors を main.scss に追加しましたが、色のプロパティにアクセスできなくなりました。 リーリー これにより、webpack が scss のコンパイルに失敗し、次のエラーが表示されます:

リーリー

エラーは理解できましたが、それを解決するためのオプションがわかりません。色に CSS カスタム プロパティを使用することにこだわっているので、

@使用

する方法はありますか、それとも色関連の CSS をすべて同じファイルに保存することにこだわっていますか?

Answer 1

CSS 変数で SCSS 名前空間を使用する方法が見つかりませんでした。 @「./abstracts」を *; として使用すると機能します。 この記事では、scss を使用してテーマを作成する方法の良い例を示します。