Se você já precisou fazer alguma alteração em um projeto que utiliza Laravel, provavelmente você se deparou com uma serie de componentes utilizando VueJS. Isso por quê, mesmo não definindo qual biblioteca JavaScript ou pré-processador CSS você deve usar em seus projetos, o Laravel deixa uma estrutura pré-definida utilizando Vue e SASS/SCSS.
Para utilizar uma variável definida no seu arquivo ./css/variables.scss dentro de um componente chamado ./js/File.vue, por exemplo, você só precisa fazer o seguinte.
File.vue:
...
<style lang="scss" scoped>
@import '../css/variables';
p {
color: $awesome-color-g200;
}
</style>
...
Isso é possível por quê, ao setar o atributo lang="scss", o VueJS considera como SCSS tudo que está dentro da tag style, por isso podemos usufruir de todos os recursos do pré-processador dentro do no nosso componente.
Caso você esteja fazendo algum tipo de refatoração, eu recomendo recriar as variáveis utilizando apenas CSS. Desta forma, você terá acesso direto as suas variáveis, sem necessidade de importação de arquivos.
