color_variables.css:

 [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --footer_text: #000; }

avatar.css:

 .avatar { background-color: var(--avatar_bg); color: var(--avatar_text); border: 1px solid var(--avatar_border); }

botón.css:

 .button { background-color: var(--button_bg); color: var(--button_text); border: 1px solid var(--button_border); }

Tenemos un solo archivo color_variables.css para todos los componentes (avatar, botón, pie de página, pestaña, etc.). Por ejemplo: tengo una página que muestra solo el componente de avatar, muestra los archivos avatar.js y avatar.module.css. Por lo tanto, otros componentes innecesarios no se representarán en esa página.

Mi pregunta es, ¿hay alguna forma de elegir las variables utilizadas del archivo color_variables.css? Dije que tengo una página que representa solo el componente de avatar. Entonces, quiero obtener el valor de color de estas tres variables (--avatar_bg, --avatar_text, --avatar_border) del archivo color_variables.css. No necesito variables de color de botón y otras variables de color innecesarias en esa página. ¿Hay alguna forma de elegir solo las variables de color necesarias? (No deseo dividir ese archivo de variable global)