Vedovelli

Adicionar Bootstrap e Font-awesome no projeto criado com o Vue Cli

Recentemente a equipe do Vue.js lançou sua própria ferramenta de criação de boilerplate (um esqueleto sobre o qual se pode desenvolver uma aplicação) chamada vue-cli. Trata-se de mais uma ferramenta desenvolvida no ecossistema Node.js e que é utilizada através da linha de comando. vue init webpack seu-projeto criará uma pasta e nela acondicionará todos os arquivos necessário para uma aplicação Vue. Mas o mais importante é que todos os includes necessário + os arquivos de configuração são criados e linkados pela ferramenta, poupando o desenvolvedor de um trabalho maçante, a ser feito em cada novo projeto.

Logo de cara já se tem a disposição:

  • webserver pronto para servir seus arquivos, após passarem pelo processamento do Webpack (ou Browserify, se esta for sua escolha);
  • script para gerar o build da aplicação, pronto para deploy;
  • diversos loaders capazes de lidar com diferentes arquivos dentro do Javascript (CSS, Style, Bebel, JSList).

Mas o Vue Cli não atende a todas as situações e uma destas é a inclusão de CSSs de bibliotecas já consagradas no desenvolvimento web. Este post tratará de dois casos populares: Bootstrap e Font Awesome.

Para incluir a parte de Javascript não se necessita de nada além de um import: quando se instala o Bootstrap através do NPM, a biblioteca já vem pronta para ser incluída num ambiente de module bundler. A dificuldade se apresenta quando se precisa incluir também o CSS e as fontes (TTF, OTF etc) que este faz referência. Explico…

Ao utilizar o Vue Cli os arquivos são servidos a partir da pasta /src, porém, a pasta node_modules vive num diretório acima, o que inviabiliza um simples include com <link> diretamente no /src/index.html. O webserver simplesmente não encontra os assets e retorna 404. A solução para o caso é fazer o import “the webpack way“: utilizando import dentro do Javascript.

A solução é relativamente simples e será demontrada abaixo:

O webpack, com toda a sua inteligência é capaz de gerenciar uma grande quantidade de diferentes tipos de arquivos, indo além do Javascript. Porém, é preciso configura-lo para que ele 1. identifique estes arquivos e 2. aplique o loader correspondente.

Antes de prosseguir, explicarei o que é um loader. O termo é específico para o Webpack, sendo que no universo Browserify o nome é diferente. Trata-se de plugins que adicionam novas habilidades ao Webpack.

Webpack?

Desenvolvimento front end evoluiu muito (MUITO) nos últimos anos e agora se utilizam ferramentas para gerenciar o output final (arquivos HTML, CSS e Javascript) que serão interpretados pelo browser para devolver o resultado ao usuário. Dentro deste contexto, o Webpack funciona como um processador que lê um arquivo inicial (pode ser configurado para ler mais de um…), identifica suas dependências (bibliotecas instaladas via NPM, os arquivos do desenvolvedor, arquivo CSS, fontes, imagens, HTML …) e gera um resultado final organizado e “final” para publicação. Isso quer dizer: um único arquivo Javascript com todas as biliotecas e os próprios módulos do desenvolvedor, javascript minificado, CSSs declarados nos módulos são extraídos e concatenados num único arquivo e adicionados no <head> do HTML entre outras coisas.

Voltando ao nosso problema inicial…

Como eu disse anteriormente está descartada a inclusão dos CSSs numa tag <link> em /src/index.html. Como proceder então? Faz-se o import no arquivo Javascript de entrada, que é o ponto de partida para o webpack fazer seu trabalho.

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App'

Vue.use(VueResource)

import 'bootstrap/dist/css/bootstrap.css' // << import CSS
import 'font-awesome/css/font-awesome.css' // << import CSS

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App }
})

CSS importado dentro do Javascript?

Sim, mantenha a calma. O webpack tratará de identificar, extrair, concatenar, minificar e incluir o CSS dentro da tag <head> do seu HTML. E você, desenvolvedor, ainda fica com a vantagem de mal tocar no seu arquivo index.html.

Receita de bolo

Tomando como base o projeto criado com vue init webpack exemplo, a pasta exemplo será criada. Dentro dela, localize o arquivo /build/webpack.base.conf.js. Este arquivo serve de base para os comandos webpack que 1. servirá seu projeto durante o desenvolvimento 2. gerará o build para deploy. Neste arquivo, configura-se os loaders necessários para lidar com arquivos CSS e arquivos de fonte (TTF, OTF, EOT, SVG etc.).

module: {
    loaders: [
      { 
        test: /.css$/,
        loader: 'style!css'
      },
      {
        test: /.woff(?v=d+.d+.d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /.woff2(?v=d+.d+.d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /.ttf(?v=d+.d+.d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /.eot(?v=d+.d+.d+)?$/,
        loader: "file"
      },{
        test: /.svg(?v=d+.d+.d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }
    ]
  }

Veja o arquivo completo aqui: https://gist.github.com/vedovelli/bb098681849b9d10e240

É necessário instalar também, usando o NPM, os loaders necessários para lidar com CSS: npm install style-loader css-loader –save-dev

Tendo feito isso, basta importar normalmente (ver o primeiro trecho de código mostrado neste mesmo post, logo acima…) os arquivos CSS desejados e o webpack cuidará do resto, tanto durante o desenvolvimento quanto ao gerar o build para produção.

Importante: lembre-se que o import deve considerar como entrada a pasta node_modules sem, no entanto, inclui-la: import ‘bootstrap/dist/css/bootstrap.css’

Veja na imagem abaixo todo o CSS incluído no <head> da página, sem se misturar ao Javascript (apesar do import no Javascript).

Screen Shot 2016-01-29 at 10.06.57 PM

Espero ter ajudado!

Um forte abraço,

Ved

Powered by WPeMatico