Tengo una aplicación Vue Js (V2) que tiene una estructura como esta (acortada para enfocarse en el problema):
_variables.scss
$brand-theme:#F5F5F5y cargado a través del cargador sass como tal en vue.config.js
@import "@/assets/scss/_variables.scss";Como resultado, en mis diversos componentes de Vue puedo hacer referencia de esta manera (esto se usa en algunos archivos de Vue, no solo en App.Vue, por ejemplo)
.button { width: 100%; text-align: center; background: $brand-theme; ....Tengo un requisito, donde necesito inspeccionar la URL y cambiar este valor durante el tiempo de ejecución antes de la representación, ya sea manipulando el dom, por ejemplo, u otro enfoque efectivo.
Después de algunas investigaciones iniciales, encuentro que usar esta estructura actual es problemático y me lleva a repensar el enfoque, pero estoy interesado en saber si hay una manera de hacer esto con cambios mínimos en el código.
Gracias por adelantado.
Asigne el valor a una variable CSS, en el elemento #app :
<style lang="scss"> #app { --brand-theme: $brand-theme; } </style>En cualquier componente:
<style> .button { background-color: var(--brand-theme); } </style> Cambiar el valor de la variable --brand-theme en tiempo de ejecución en el elemento #app o cualquiera de sus descendientes, afectará a ese elemento y a cualquier elemento secundario que lea var(--brand-theme) .
Cambiar el valor de una variable CSS desde JS es fácil:
document.querySelector('#app').style.setProperty('--brand-theme', newValue); // or, on <div id="app" ref="myApp"> this.$refs['myApp'].style.setProperty('--brand-theme', newValue);Y también puedes usar esta sintaxis:
<div :style="{ '--brand-theme': dataDrivenValue }" />