Neste post será mostrado como adicionar SASS ao seu projeto permitindo estilizar seus componentes de maneira mais dinâmica.

O Vue CLI vem parcialmente pronto para utilizar SASS para a estilização dos seus componentes, porém precisa ser instalado os módulos que ele precisa para o pré-processador SASS.

Para fazer isso, acesse o terminal e insira o comando:

npm install node-sass@4.5.0 sass-loader@4.1.1 --save-dev

Pronto, com os módulos do node necessários instalados, precisamos agora criar nossos componentes utilizando o SASS em seu estilo.

Para criar qualquer componente no vue utilizamos o seguinte template:

<template>
     <!? html ?>
</template>
export default {
    
}
<style scoped>

<!? css ?>
</style>

A partir deste template podemos iniciar a criação do componente Painel, um componente muito simples e não muito elegante mas que vai ajudar a entender a utilizar SASS para sua estilização, conforme segue código abaixo:

<template>
{{ titulo }}
</template>
export default {
    props: [?titulo?]
}
<style scoped>
.painel {
     backgroud: red;
     border: 1px solid #000;
}
</style>
A partir de agora uma simples alteração fará a diferença para utilizarmos o pré-compilador SASS no componente, precisamos alterar a tag <style> da segunte maneira:
<style scoped lang=?scss?>

$cor: red;
.painel {
     backgroud: $cor;
     border: 1px solid #000;
}
</style>

A partir de agora já pode utilizar a sintaxe do SASS para estilizar qualquer componente em seu projeto single page.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.