Vue.js + CSS

A reatividade do Vue.js proporciona maneiras muito interessantes de trabalhar com CSS. Você pode referenciar suas classes dentro da template HTML por meio de valores estáticos, propriedades computadas, métodos ou aplicar condicionais.

Na página do Vue, tem um excelente guia de como você pode fazer ligação entre seu HTML e as classes CSS. Segue o link.

Porém, o foco deste artigo é mostrar como o Vue.js pode te ajudar a organizar o código CSS.

Vue CLI + CSS: Configurar o Projeto

Quando você cria um projeto pelo Vue CLI, existe o item "CSS Pre-processors" que deixa você escolher o pré-processador CSS da sua preferência. A princípio você tem três opções: Sass, Less ou Styles.

Algumas pessoas podem se perguntar: E o PostCSS? Não aparece nesta lista?

Para quem não sabe, o PostCSS funciona como um processador CSS por meio Plugins escritos com JavaScript. Inicialmente parece que a ideia dele é substituir o Sass/Less/Styles, mas o objetivo do PostCSS é auxiliar no processamento de código CSS. Inclusive, ele pode trabalhar em conjunto com pré-processadores ou, dependendo do caso, ele pode até substituí-los.

O motivo pelo qual o PostCSS não aparece na lista de pré-processadores, é que o Vue.js já usa ele internamente. Ou seja, se você precisar do PostCSS, ele já está pronto para uso. Clique aqui para saber mais sobre isso.

Neste artigo utilizarei CSS puro ou Sass, dependendo do exemplo. Se você optar por outro ou optar por não usar pré-processador, sem problemas.

Se criou um projeto Vue.js e não selecionou um pré-processador CSS, basta instalar o Webpack Loader do processador que você deseja utilizar. O resto o Vue.js se encarrega para você. Clique aqui para ver mais detalhes.

Single File Component: Style

A estrutura padrão do Single File Component é composta por três tags:

• template: Onde fica o código HTML.
• script: Onde fica o código JavaScript.
• style: Onde fica o código CSS.

Utilizar a tag Style do Single File Component é a maneira mais básica de escrever código CSS no Vue.js. Ao "compilar" (fazer build) do aplicativo, o Vue.js extrairá o código CSS que está dentro desta tag e criará um arquivo CSS minificado na pasta ./dist/ .

Segue um exemplo básico de um Single File Component com a tag Style:

<template>
  <div>
    <div class="blue">test</div>
  </div>
</template>

<script>
export default {
  name: 'test',
};
</script>

<style>
.blue {
  background-color: blue;
  color: white;
}
</style>

Em relação ao exemplo acima, a classe ".blue" ficará disponível em todo o aplicativo. Ou seja, você pode referência-la em outros componentes.

Caso você queira deixar uma classe CSS restrita a somente um componente, você pode fazer isso de duas maneiras. A primeira forma é utilizando atributo "scoped".

<template>
  <div>
    <div class="blue">test</div>
  </div>
</template>

<script>
export default {
  name: 'test',
};
</script>

<style scoped>
.blue {
  background-color: blue;
  color: white;
}
</style>

A segunda maneira é utilizando o atributo "module", que internamente utiliza a biblioteca CSS Module para manipular o nome da classe com o objetivo de gerar um nome único. Atenção que neste caso o a declaração do código HTML também muda.

<template>
  <div>
    <div :class="[$style.blueblue]">test</div>
  </div>
</template>

<script>
export default {
  name: 'test',
};
</script>

<style module>
.blue {
  background-color: blue;
  color: white;
}
</style>

Caso você queira utilizar um pré-processador CSS dentro da tag Style, é só utilizar o atributo "lang". Veja um exemplo com Sass:

<template>
  <div>
    <div class="blue">test</div>
  </div>
</template>

<script>
export default {
  name: 'test',
};
</script>

<style lang="scss">
$myBlue: #10039c;
$myWhite: #ffffff;

.blue {
  background-color: $myBlue;
  color: $myWhite;
}
</style>

Arquivo CSS Separado

A tag Style do Single File Component é opcional, ou seja, você pode colocar o seu código CSS em outros lugares.

Uma alternativa muito comum é criar arquivos CSS separados e importar para sua aplicação. Neste caso, todas as classes serão globais e podem ser referências em qualquer componente.

O único detalhe desta estratégia é que você precisa abrir o arquivo ./src/main.js e importar o seu arquivo CSS:

import Vue from 'vue';
import App from './App.vue';

import './my-style.css'; // ATTENTION HERE

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Durante o build do aplicativo o conteúdo deste arquivo CSS será minificado juntamente com outros códigos CSS. Isso significa que independentemente do lugar que você declarou seu código CSS, ele terá o mesmo tratamento.

O mesmo vale para quem utiliza um pré-processador CSS, basta importar os arquivos com extensão .scss (para quem utiliza o Sass) no arquivo ./src/main.js.

Vue.js + Bootstrap: Como importar bibliotecas

É possível também importar bibliotecas CSS e vou demonstrar como importar o Bootstrap (framework CSS mais popular) para um projeto Vue.js.

Antes de continuar, vou deixar claro que somente importarei os arquivos CSS do Bootstrap. Não importarei os arquivos JavaScript do Bootstrap, uma que eles só funcionam em conjunto com a biblioteca jQuery.

Também não utilizarei os componentes do BootstrapVue, que embora seja um projeto interessante, mas não é foco deste artigo.

Basicamente existem três maneiras para importar o Bootstrap. A primeira delas é a mais simples e é só o arquivo CSS no arquivo ./src/main.js .

import Vue from 'vue';
import App from './App.vue';

import 'bootstrap/dist/css/bootstrap.min.css'; // ATTENTION HERE

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Desta forma, ao fazer o build do aplicativo, será criado o arquivo ./dist/check-vendors.[hash].css que é exclusivo para o código CSS das suas bibliotecas.

A segunda maneira é importar o Bootstrap por meio de um arquivo Sass.

@import '~bootstrap/scss/bootstrap';

E a terceira maneira também é importar o Boostrap por meio de um arquivo Sass, mas importando parcialmente e especificando os módulos desejados. Veja o exemplo a seguir:

// Required Modules
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

// Optional Modules
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';

Importando parcialmente, também é possível alterar variáveis internas do Bootstrap com o objetivo de mudar as cores ou espaçamentos padrões. Para mais detalhes sobre essa personalização clique aqui.

Vale destacar que nos itens 2 e 3, não será gerado um arquivo separado para as bibliotecas. Todos os códigos CSS ficarão dentro do mesmo arquivo.

Enfim, estas são as principais maneiras de trabalhar com CSS no Vue.js. Dúvidas ou sugestões é só entrar em contato. Abraço.