vue2-adicionando-arquivos-scss-componentes

Olá pessoal,

Resolvi escrever esta pequena dica inspirado na dúvida de um usuário da comunidade vuejs-brasil.slack.com.

A dúvida era: Como adicionar arquivos scss (não sass, sim, são diferentes, veja [aqui](http://pt.stackoverflow.com/a/54454)) em um componente [Vue](https://vuejs.org/v2/guide/)?

Estou partindo do princípio que você possui um boilerplate do vue, instalado através do [vue-cli](https://github.com/vuejs/vue-cli) com o template webpack.

Pois bem, para incluirmos arquivos .scss em componentes do Vue, primeiramente precisamos instalar dois módulos pelo npm ou [yarn](https://yarnpkg.com):

`npm i node-sass sass-loader -SD`

Após a instalação dos módulos, na tag style do seu componente coloque o atributo `lang=”scss”` como mostrado abaixo:

`<style lang=”scss”></style>`

Depois faça a importação do arquivo .scss:

`<style lang=”scss”>`
`@import “../../assets/scss/my-file”;`
`</style>`

Este arquivo `my-file.scss` pode ser colocado em um local de sua preferência.

Depois é só rodar o comando `npm run dev` e partir pro abraço!

Simples assim !

Espero que tenham gostado e que seja útil a todos.

Até a próxima.