Bootstrap e Vite#

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

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 para edição ao vivo.

Configuração#

Estamos construindo um projeto Vite 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 Vite. Diferentemente do nosso guia do Webpack, há apenas uma dependência de ferramenta de construção aqui. Usamos --save-dev para sinalizar que essa dependência é somente para uso em desenvolvimento e não para produção.
npm i --save-dev vite
  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
  1. Instale a dependência adicional. Além do Vite e do Bootstrap, precisamos de outra dependência (Sass) para importar e empacotar adequadamente o CSS do Bootstrap.
npm i --save-dev sass

Agora que temos todas as dependências necessárias instaladas e configuradas, 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 vite.config.js

Quando terminar, seu projeto completo deverá ficar assim:

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

Neste ponto, tudo está no lugar certo, mas o Vite não funciona porque ainda não preenchemos nosso vite.config.js.

Configure o Vite#

Com as dependências instaladas e nossa pasta de projeto pronta para começarmos a codificar, agora podemos configurar o Vite e executar nosso projeto localmente.

  1. Abra o vite.config.js no seu editor. Como ele está em branco, precisaremos adicionar alguma configuração inicial a ele para que possamos iniciar nosso servidor. Esta parte da configuração informa ao Vite onde procurar o JavaScript do nosso projeto e como o servidor de desenvolvimento deve se comportar (atualizando a partir da pasta src com recarregamento automático).
import { resolve } from 'path'

export default {
 root: resolve(__dirname, 'src'),
 build: {
   outDir: '../dist'
 },
 server: {
   port: 8080
 }
}
  1. Em seguida, preenchemos src/index.html. Esta é a página HTML que o Vite carregará no navegador para utilizar o CSS e o JS agrupados que adicionaremos a ele em passos posteriores.
<!doctype html>
<html lang="pt-br">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Bootstrap com Vite</title>
   <script type="module" src="./js/main.js"></script>
 </head>
 <body>
   <div class="container py-4 px-3 mx-auto">
     <h1>Olá, Bootstrap e Vite!</h1>
     <button class="btn btn-primary">Botão primário</button>
   </div>
 </body>
</html>

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

  1. Agora precisamos de um script npm para executar o Vite. Abra o package.json e adicione o script start mostrado abaixo (você já deve ter o script test). Usaremos esse script para iniciar nosso servidor de desenvolvimento Vite local.
{
 // ...
 "scripts": {
   "start": "vite",
   "test": "echo \"Erro: nenhum teste especificado\" && exit 1"
 },
 // ...
}
  1. E finalmente, podemos iniciar o Vite. Da pasta meu-projeto no seu terminal, execute o script npm recém-adicionado:
npm start

Servidor de desenvolvimento Vite em execução

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

Importe o Bootstrap#

  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 obter detalhes.

  1. Em seguida, carregamos o CSS e importamos o JavaScript do Bootstrap. Adicione o seguinte ao src/js/main.js para carregar o CSS e importar todo o JS do Bootstrap. O Popper será importado automaticamente pelo Bootstrap.
// Importa nosso CSS personalizado
import '../scss/styles.scss'

// 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 Vite 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 Vite 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.