Faz um bom tempo que, na empresa onde trabalho, utilizamos um arquivo geral de variáveis sass para definir as cores do sistema. Desde então, o que fazíamos era importar manualmente o arquivo de variáveis para cada componente, cheguei até a criar um snippet no vue para fazer isso por mim toda vez que eu criava um componente. Só que isso está longe de ser uma solução ideal.
O primeiro que essa abordagem gerava era que ela dependia que todos os meus colegas lembrassem de importar as variáveis, ou usassem meu snippet. E o segundo problema era que tudo bem, enquanto fossem apenas variáveis no arquivo esse tipo de abordagem não complicaria muito o tamanho do bundle final, uma vez que, ao ser compilado, a única coisa que aconteceria é que as variáveis seriam substituídas por seus respectivos valores e nenhum código css seria adicionado. Mas e se alguém adicionasse um código css ali por engano? Dependendo do código isso poderia impactar seriamente o bundle final da aplicação. Por conta disso, eu estava procurando uma solução mais aceitável para esse problema, e acabei topando com essa pergunta no Stack Overflow.
Edit:: Quando publiquei esse post, um usuário chamado Fagner P do grupo VueJS Brasil, me alertou que uma outra abordagem possivel seria importar o arquivo de variáveis no App.vue. Infelizmente, por motivos ainda desconhecidos, essa solução não funciona na plataforma em que trabalho, mas pode ser que funcione na sua, então vale tentar antes de seguir com esse tutorial. E valeu Fagner pelo aviso!
E qual a solução que eu achei nessa pergunta? Bem simples, na real a única coisa que você precisa fazer é adicionar o código abaixo ao seu vue.config.js:
module.exports = {
css: {
loaderOptions: {
sass: {
data: '@import "@/pathto/variables.scss";'
}
}
}
};
Alguns pontos importantes:
- Se você está usando o
sass-loader 8, substitua odataporprependData; - É necessário reiniciar seu servidor para que essas mudanças se apliquem;
- Essas mudanças não irão funcionar se você não colocar
lang="scss"(ou qualquer outro pré processador que esteja usando) na tag style do seu componente Vue.
E prontinho! Agora você pode usar suas variáveis sass em qualquer componente sem ter que importar! Abaixo você vai encontrar um exemplo feito pela @sdras desse código funcionando e mudando a cor primária do texto para roxo:
E é isso, eu espero que essa dica tenha te sido útil para você. Até a próxima! :D
Links que foram essenciais para a criação desse texto:
