Intenté hacer el ejemplo a continuación, pero no funcionó. La razón por la que estoy tratando de hacer esto es porque tendría que agregar demasiados modificadores (sintonizados) para que esto funcione. Así que estaba tratando de obtener el archivo css en función de una condición. ¿Por qué esto no funcionaría? ¿Alguien sabe si hay una mejor alternativa que un millón de modificadores?
<style v-if="!isTuningActive" lang="scss" src="./normal-version.scss"></style> <style v-else lang="scss" src="./tuned-version.scss" ></style>¿Por qué no separar en componentes? Cada componente con su propio estilo.
Puede compilar sus archivos scss separados en una sola hoja de estilo (main.scss, por ejemplo), luego simplemente importe ese archivo main.scss a su componente principal (probablemente, App.vue).
Esto le permitirá simplemente cambiar la clase css en su ejemplo anterior en lugar de intentar importar hojas de estilo condicionalmente.
Por ejemplo, digamos que su nuevo archivo 'main.scss' contiene el siguiente scss.
.tuned-version { p { color: red } } .untuned-version { p { color: blue } }Luego, simplemente deberá agregar dinámicamente la clase según su propiedad isTuningActive .
<div :class="isTuningActive ? 'tuned-version' : 'untuned-version"> <p>My content</p> </div>Referencias útiles: