Tengo un proyecto en Vue y BootstrapVue. He modificado las variables $dark
y $light
de Bootstrap con éxito. Sin embargo, no quiero re-definir las variables en cada componente que haga, por lo que he hecho una hoja de estilos Scss en la que voy a poner todas mis modificaciones. Pero ahora necesito encontrar una forma de que los estilos de dicha hoja se apliquen a todos los componentes.
Actualmente, la estructura de mi proyecto se ve así (simplificada):
|-node_modules
|-src/
| - App.vue
| - main.ts
| - components/
| - Componente1.vue
| - scss/
| - main.scss
| - partials/
| - _partial1.scss
He intentado importar main.scss
en la sección de App.vue, quedando así:
<style lang="scss">
@import 'scss/main';
@import '~bootstrap/dist/css/bootstrap.min';
@import '~bootstrap-vue/dist/bootstrap-vue';
</style>
Sin embargo, al hacer esto las variables que he hecho no funcionan en los componentes. No quiero importar main.scss
en todos mis componentes, puesto que si mal no recuerdo causa pérdidas de rendimiento (además de que se ve mal). ¿Qué puedo hacer?