Usando variáveis Sass com Angular 4
Bem, estava aqui querendo utilizar um processador css em um projeto angular 4 de estudo e acabei escolhendo sass.
Bem a primeira coisa que temos que fazer depois de criar um projeto angular 4 utilizando angular-cli, é configurar o cli para utilizar scss ao invés de css e nos aquivos css alterar as extensões para scss:
No arquivo <seu_projeto>/.angular-cli.json altere as seguintes opções de:
para:
Crie o arquivo /src/vars.css e declare suas variáveis:
Altere o arquivo /src/styles.css para /src/styles.scss e utilize as variáveis:
Repare que temos que importar o arquivo de variáveis para podermos utilizar dentro de nosso arquivo, se não fizer dessa forma, ao compilar irá ser acusado um erro. As vezes é complicado identificar o caminho correto para o arquivo dependendo de nossa estrutura de arquivos, com isso podemos solucionar esse problema declarando o arquivo com o ~ na frente, quando fizermos isso o webpack resolve o caminho para:
<seu_projeto>/src/vars.scss
e dessa forma sempre que quiser usar as variáveis em algum component importe o arquivo @import ‘~vars.scss’; e as utilize.
