Bootstrap e Parcel#

O guia oficial sobre como incluir e agrupar CSS e JavaScript do Bootstrap em seu projeto usando Parcel.

Quer pular para o final? Baixe o código-fonte e a demonstração funcional para este guia do repositório twbs/examples. Você também pode abrir o exemplo no StackBlitz, mas não executá-lo porque o Parcel não é suportado lá no momento.

Configuração#

Estamos construindo um projeto Parcel com Bootstrap do zero, então há alguns pré-requisitos e passos iniciais antes de realmente começarmos. Este guia requer que você tenha o Node.js instalado e alguma familiaridade com o terminal.

  1. Crie uma pasta de projeto e configure o npm. Criaremos a pasta meu-projeto e inicializaremos o npm com o argumento -y para evitar que ele nos faça todas as perguntas interativas.
mkdir meu-projeto && cd meu-projeto
npm init -y
  1. Instale o Parcel. Diferentemente do nosso guia do Webpack, há apenas uma dependência de ferramenta de construção aqui. O Parcel instalará automaticamente transformadores de linguagem (como Sass) conforme os detecta. Usamos --save-dev para sinalizar que essa dependência é somente para uso em desenvolvimento e não para produção.
npm i --save-dev parcel
  1. Instale o Bootstrap. Agora podemos instalar o Bootstrap. Também instalaremos o Popper, já que nossos menus suspensos, popovers e tooltips dependem dele para seu posicionamento. Se você não planeja usar esses componentes, pode omitir o Popper aqui.
npm i --save bootstrap @popperjs/core

Agora que temos todas as dependências necessárias instaladas, podemos começar a trabalhar na criação dos arquivos do projeto e na importação do Bootstrap.

Estrutura do projeto#

Já criamos a pasta meu-projeto e inicializamos o npm. Agora também criaremos nossa pasta src e os arquivos da folha de estilo e do JavaScript para completar a estrutura do projeto. Execute o seguinte a partir de meu-projeto ou crie manualmente a pasta e a estrutura de arquivos mostradas abaixo.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Quando terminar, seu projeto completo deverá ficar assim:

meu-projeto/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

Neste ponto, tudo está no lugar certo, mas o Parcel precisa de uma página HTML e script npm para iniciar nosso servidor.

Configure o Parcel#

Com as dependências instaladas e nossa pasta de projeto pronta para começarmos a codificar, agora podemos configurar o Parcel e executar nosso projeto localmente. O Parcel em si não requer nenhum arquivo de configuração por design, mas precisamos de um script npm e um arquivo HTML para iniciar nosso servidor.

  1. Preencha o arquivo src/index.html. O Parcel precisa de uma página para renderizar, então usamos nossa página index.html para configurar um HTML básico, incluindo nossos arquivos CSS e JavaScript.
<!doctype html>
<html lang="pt-br">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Bootstrap com Parcel</title>
   <link rel="stylesheet" href="scss/styles.scss">
   <script type="module" src="js/main.js"></script>
 </head>
 <body>
   <div class="container py-4 px-3 mx-auto">
     <h1>Olá, Bootstrap e Parcel!</h1>
     <button class="btn btn-primary">Botão primário</button>
   </div>
 </body>
</html>

Estamos incluindo um pouco de estilo Bootstrap aqui com div class="container" e <button> para que possamos ver quando o CSS do Bootstrap for carregado pelo Parcel.

O Parcel detectará automaticamente que estamos usando Sass e instalará o plugin Sass Parcel para dar suporte a ele. No entanto, se desejar, você também pode executar manualmente npm i --save-dev @parcel/transformer-sass.

  1. Adicione os scripts npm do Parcel. Abra o package.json e adicione o seguinte script start ao objeto scripts. Usaremos esse script para iniciar nosso servidor de desenvolvimento Parcel e renderizar o arquivo HTML que criamos após ele ser compilado no diretório dist.
{
  // ...
  "scripts": {
    "start": "parcel serve src/index.html --public-url / --dist-dir dist",
    "test": "echo \"Erro: nenhum teste especificado\" && exit 1"
  },
  // ...
}
  1. E finalmente, podemos iniciar o Parcel. Da pasta meu-projeto no seu terminal, execute o script npm recém-adicionado:
npm start

Servidor de desenvolvimento Parcel em execução

Na próxima e última seção deste guia, importaremos todo o CSS e JavaScript do Bootstrap.

Importe o Bootstrap#

Importar o Bootstrap para o Parcel requer duas importações, uma para o nosso styles.scss e uma para o nosso main.js.

  1. Importe o CSS do Bootstrap. Adicione o seguinte ao src/scss/styles.scss para importar todos os arquivos fonte Sass do Bootstrap.
// Importa todo o CSS do Bootstrap
@import "bootstrap/scss/bootstrap";

Você também pode importar nossas folhas de estilo individualmente se quiser. Leia nossa documentação de importação do Sass para detalhes.

  1. Importe o JS do Bootstrap. Adicione o seguinte ao src/js/main.js para importar todo o JS do Bootstrap. O Popper será importado automaticamente pelo Bootstrap.
// Importa todo o JS do Bootstrap
import * as bootstrap from 'bootstrap'

Você também pode importar plugins JavaScript individualmente, conforme necessário, para manter os pacotes pequenos:

import Alert from 'bootstrap/js/dist/alert'

// ou especifique quais plugins você precisa:
import { Tooltip, Toast, Popover } from 'bootstrap'

Leia nossa documentação do JavaScript para mais informações sobre como usar os plugins do Bootstrap.

  1. E pronto! 🎉 Com os arquivos fonte Sass e JS do Bootstrap totalmente carregados, seu servidor de desenvolvimento local deve ficar assim:

Servidor de desenvolvimento Parcel em execução com Bootstrap

Agora você pode começar a adicionar quaisquer componentes do Bootstrap que quiser usar. Não deixe de conferir o projeto de exemplo completo do Parcel para saber como incluir Sass personalizado adicional e otimizar sua construção importando apenas as partes do CSS e JS do Bootstrap que você precisa.

Viu algo errado ou desatualizado aqui? Abra um issue no GitHub. Precisa de ajuda para solucionar problemas? Pesquise ou inicie uma discussão no GitHub.