Vue 3 アプリケーションで動的 CSS システムを作成するにはどうすればよいですか?

Question

さまざまなクライアントが使用するアプリケーションを開発していますが、ばかげているように聞こえるかもしれませんが、カラースキームは独自の機密情報とみなされているため、「テーマ」をクライアント間で共有することはできません。

これで、色はメインの App.vue コンポーネントで定義され、<stylescoped> の代わりに <style> が使用されなくなり、ダウンストリームで定義されます。コンポーネントにはスコープが設定されています。

現在の動作方法では、CSS 変数を使用して色とグラデーションを定義しています。

私は多かれ少なかれ、疑似コードのようなことを行うソリューションを探しています:

リーリー

すべての下流コンポーネントはこれらの変数を使用し、これは非常に大規模なアプリケーションであることに留意してください。

私はバンドルに Vite を使用しています (それが機能する場合)。

Answer 1

.css ファイルを作成して、クライアントごとにこれらの CSS 変数をエクスポートできます。次に、main.js エントリ ポイントで、そのクライアントに対応するファイルをインポートできます:

リーリー