Bootstrap & Vite

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

Nesta página

Quer pular para o final? Baixe o código-fonte e a demonstração de trabalho deste guia no repositório twbs/examples . Você também pode abrir o exemplo no StackBlitz para edição ao vivo.

Configurar

Estamos construindo um projeto Vite com Bootstrap do zero, então existem alguns pré-requisitos e etapas iniciais antes que possamos realmente começar. Este guia requer que você tenha o Node.js instalado e alguma familiaridade com o terminal.

Crie uma pasta de projeto e configure o npm. Vamos criar a my-projectpasta e inicializar o npm com o -yargumento para evitar que ele nos faça todas as perguntas interativas.
```
mkdir my-project && cd my-project
npm init -y
```
Instale o Vite. Ao contrário do nosso guia Webpack, há apenas uma única dependência de ferramenta de compilação aqui. Usamos --save-devpara sinalizar que essa dependência é apenas para uso em desenvolvimento e não para produção.
```
npm i --save-dev vite
```
Instale o Bootstrap. Agora podemos instalar o Bootstrap. Também instalaremos o Popper, pois nossos menus suspensos, popovers e dicas de ferramentas dependem dele para seu posicionamento. Se você não planeja usar esses componentes, pode omitir Popper aqui.
```
npm i --save bootstrap @popperjs/core
```
Instale dependência adicional. Além do Vite e do Bootstrap, precisamos de outra dependência (Sass) para importar e agrupar corretamente 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 criando os arquivos do projeto e importando o Bootstrap.

Estrutura do projeto

Já criamos a my-projectpasta e inicializamos o npm. Agora também criaremos nossa srcpasta, folha de estilo e arquivo JavaScript para completar a estrutura do projeto. Execute o seguinte em my-projectou crie manualmente a estrutura de pastas e arquivos mostrada 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 deve ficar assim:

my-project/
├── 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 funcionará porque ainda não preenchemos o nosso vite.config.js.

Configurar 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.

Abra vite.config.jsem seu editor. Como está em branco, precisaremos adicionar algumas configurações padrão para que possamos iniciar nosso servidor. Esta parte da configuração diz ao Vite para procurar o JavaScript do nosso projeto e como o servidor de desenvolvimento deve se comportar (puxando da srcpasta com hot reload).
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

Em seguida, preenchemos src/index.html. Esta é a página HTML que o Vite carregará no navegador para utilizar o pacote CSS e JS que adicionaremos a ela em etapas posteriores.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

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

Agora precisamos de um script npm para executar o Vite. Abra package.jsone adicione o startscript mostrado abaixo (você já deve ter o script de teste). Usaremos este script para iniciar nosso servidor de desenvolvimento Vite local.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
E, finalmente, podemos iniciar o Vite. Na my-projectpasta do seu terminal, execute o script npm recém-adicionado:
```
npm start
```

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

Importar Bootstrap

Configure a importação Sass do Bootstrap no vite.config.js. Seu arquivo de configuração agora está completo e deve corresponder ao snippet abaixo. A única parte nova aqui é a resolveseção - usamos isso para adicionar um alias aos nossos arquivos de origem node_modulespara manter as importações o mais simples possível.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
Agora, vamos importar o CSS do Bootstrap. Adicione o seguinte para src/scss/styles.scssimportar todos os Sass de origem do Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Você também pode importar nossas folhas de estilo individualmente, se desejar. Leia nossos documentos de importação Sass para obter detalhes.
Em seguida carregamos o CSS e importamos o JavaScript do Bootstrap. Adicione o seguinte para src/js/main.jscarregar o CSS e importar todos os JS do Bootstrap. O Popper será importado automaticamente através do Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Você também pode importar plug-ins JavaScript individualmente, conforme necessário, para reduzir o tamanho dos pacotes:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Leia nossos documentos JavaScript para obter mais informações sobre como usar os plugins do Bootstrap.
E pronto! 🎉 Com a fonte Sass e JS do Bootstrap totalmente carregadas, seu servidor de desenvolvimento local agora deve ficar assim.

Agora você pode começar a adicionar quaisquer componentes do Bootstrap que deseja usar. Certifique-se de verificar o projeto de exemplo Vite completo para saber como incluir Sass personalizado adicional e otimizar sua compilação importando apenas as partes do CSS e JS do Bootstrap que você precisa.

Vê algo errado ou desatualizado aqui? Por favor , abra um problema no GitHub . Precisa de ajuda para solucionar problemas? Pesquise ou inicie uma discussão no GitHub.