Vue 3 애플리케이션에서 동적 CSS 시스템을 만드는 방법은 무엇입니까?

Question

저는 다양한 클라이언트가 사용할 앱을 개발 중입니다. 하지만 "테마"는 클라이언트의 색 구성표가 독점적이고 기밀로 간주되기 때문에 클라이언트 간에 공유할 수 없습니다. 말도 안 되는 소리라는 걸 알지만요.

이제 색상이 메인App.vue 组件中定义的，没有 <style> 而不是 <stylescoped>에 있고 다운스트림 구성요소의 범위가 지정됩니다.

현재 작동하는 방식은 CSS 변수를 사용하여 색상과 그라데이션을 정의하는 것입니다.

저는 의사코드와 같은 작업을 수행하는 솔루션을 찾고 있습니다.

으아악

모든 다운스트림 구성요소는 이러한 변수를 사용하며 이는 매우 큰 애플리케이션이라는 점을 기억하세요.

저는 번들링을 위해 Vite를 사용하고 있습니다(작동하는 경우).

Answer 1

이 클라이언트에 해당하는 파일을 가져올 수 있는 .css 文件，为每个客户端导出这些 css 变量。然后，在 main.js 진입점을 만들 수 있습니다.

으아아아