run - laravel y vue

Usar variables sass en un componente VueJS

Question

Tengo un problema bastante simple con un componente VueJS que necesita usar una variable. El problema viene con obtener sass para registrar variables dentro de un componente.

Intenté importar el archivo _variables.scss que contiene mis variables, pero no tuve suerte. En este punto, cualquier orientación es muy apreciada, o si hay otra forma de que un componente herede el estilo.

MyComponent.vue

<template>
<div class="my-color"></div>
</template>
<style lang="sass">
.my-color {
color: $primary-color;
}
</style>
<script>
export default{
data(){
return {}
}
}
</script>

Gulpfile.js

var elixir = require(''laravel-elixir'');
require(''laravel-elixir-vueify'');
elixir(function(mix) {
mix.browserify(''main.js'');
mix.sass(''app.scss'');
});

app.scss

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "modules/variables";

variables.scss

$primary-color: #BA2731; //Red

Answer 1

La importación de _variables.scss en cada componente parece ser la única solución que he encontrado hasta ahora ( debería funcionar, según este problema ).

<template>
<div class="my-color"></div>
</template>
<style lang="sass">
@import ''path/to/your/_variable.scss''; // Using this should get you the variables
.my-color {
color: $primary-color;
}
</style>
<script>
export default{
data(){
return {}
}
}
</script>

Como solo va a incluir variables, esto no debería ser un problema.

Pero como se menciona en el número, una palabra de advertencia: solo debe incluir entidades abstractas (variables, extends, mixins) en cada componente, sin reglas CSS concretas.

Answer 2

Para mi proyecto, utilicé el paquete web Vue CLI y aquí hay una solución que funcionó para mí.

Administro todo mi SCSS en el archivo App.vue . En cada uno de mis Component.vue dejé de usar <style></style> y comencé a crear un component.scss separado.

Entonces mi carpeta src ve así:

 /src
/assets
/components
/compA
CompA.vue
compA.scss
/compB
CompB.vue
compB.scss
App.vue
main.js

Y mi App.vue parece

<template> ... </template>
<script> ... </script>
<style lang="less">
//Bootstrap
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
//Components
@import "components/compA.scss";
@import "components/compB.scss";
</style>

La ventaja de esta configuración es administrar todos tus estilos en una ubicación y también poder usar todas tus variables de arranque y mixins.

Fui por esta ruta ya que cuando importé Boostrap SCSS en todos mis componentes, el tamaño de mi aplicación siguió creciendo. El aumento es insignificante si solo estoy importando las variables, pero cuando importo todo el Boostrap SCSS, el aumento se vuelve significativo. Hago esto para poder usar mixins y extender algunos estilos existentes.