Бутстрап и Вайт

Официальное руководство по включению и объединению CSS и JavaScript Bootstrap в ваш проект с помощью Vite.

На этой странице

Хотите перейти к концу? Загрузите исходный код и рабочую демонстрацию для этого руководства из репозитория twbs/examples . Вы также можете открыть пример в StackBlitz для редактирования в реальном времени.

Настраивать

Мы создаем проект Vite с Bootstrap с нуля, поэтому есть некоторые предварительные условия и предварительные шаги, прежде чем мы действительно сможем начать. Это руководство требует, чтобы у вас был установлен Node.js и вы немного знакомы с терминалом.

Создайте папку проекта и настройте npm. Мы создадим my-projectпапку и инициализируем npm с -yаргументом, чтобы он не задавал нам все интерактивные вопросы.
```
mkdir my-project && cd my-project
npm init -y
```
Установите Вайт. В отличие от нашего руководства по Webpack, здесь есть только одна зависимость от инструмента сборки. Мы используем --save-dev, чтобы указать, что эта зависимость предназначена только для использования в разработке, а не для производства.
```
npm i --save-dev vite
```
Установите бутстрап. Теперь мы можем установить Bootstrap. Мы также установим Popper, так как наши раскрывающиеся списки, всплывающие окна и всплывающие подсказки зависят от его позиционирования. Если вы не планируете использовать эти компоненты, вы можете опустить здесь Popper.
```
npm i --save bootstrap @popperjs/core
```
Установите дополнительную зависимость. В дополнение к Vite и Bootstrap нам нужна еще одна зависимость (Sass), чтобы правильно импортировать и связывать CSS Bootstrap.
```
npm i --save-dev sass
```

Теперь, когда у нас установлены и настроены все необходимые зависимости, мы можем приступить к созданию файлов проекта и импорту Bootstrap.

Структура проекта

Мы уже создали my-projectпапку и инициализировали npm. Теперь мы также создадим нашу srcпапку, таблицу стилей и файл JavaScript, чтобы завершить структуру проекта. Запустите следующее из my-projectили вручную создайте структуру папок и файлов, показанную ниже.

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

Когда вы закончите, ваш полный проект должен выглядеть так:

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

На данный момент все на месте, но Vite не будет работать, потому что мы еще не заполнили наш vite.config.js.

Настроить Vite

С установленными зависимостями и готовой папкой проекта для начала написания кода мы теперь можем настроить Vite и запустить наш проект локально.

Откройте vite.config.jsв своем редакторе. Поскольку он пуст, нам нужно добавить в него шаблонную конфигурацию, чтобы мы могли запустить наш сервер. Эта часть конфигурации говорит Vite, что нужно искать JavaScript нашего проекта и как должен вести себя сервер разработки (вытягивание из srcпапки с горячей перезагрузкой).
```
const path = require('path')

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

Далее заполняем src/index.html. Это HTML-страница, которую Vite загрузит в браузере, чтобы использовать связанные CSS и JS, которые мы добавим к ней на более поздних этапах.

<!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>

Мы добавили сюда немного стилей Bootstrap div class="container", <button>чтобы увидеть, когда CSS Bootstrap загружается с помощью Vite.

Теперь нам нужен скрипт npm для запуска Vite. Откройте package.jsonи добавьте startскрипт, показанный ниже (у вас уже должен быть тестовый скрипт). Мы будем использовать этот скрипт для запуска нашего локального сервера разработки Vite.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
И, наконец, мы можем запустить Vite. Из my-projectпапки в вашем терминале запустите этот недавно добавленный скрипт npm:
```
npm start
```

В следующем и последнем разделе этого руководства мы импортируем весь CSS и JavaScript Bootstrap.

Импорт начальной загрузки

Настройте импорт Sass в Bootstrap в формате vite.config.js. Теперь ваш файл конфигурации завершен и должен соответствовать приведенному ниже фрагменту. Единственная новая часть здесь — это resolveраздел — мы используем его, чтобы добавить псевдоним к нашим исходным файлам внутри node_modules, чтобы максимально упростить импорт.
```
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
  }
}
```
Теперь давайте импортируем CSS Bootstrap. Добавьте следующее, src/scss/styles.scssчтобы импортировать весь исходный код Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Вы также можете импортировать наши таблицы стилей по отдельности, если хотите. Подробнее читайте в нашей документации по импорту Sass .
Затем мы загружаем CSS и импортируем JavaScript из Bootstrap. Добавьте следующее, src/js/main.jsчтобы загрузить CSS и импортировать все JS Bootstrap. Поппер будет автоматически импортирован через Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Вы также можете импортировать плагины JavaScript по отдельности, если это необходимо, чтобы уменьшить размеры пакетов:
```
import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
```
Прочтите нашу документацию по JavaScript для получения дополнительной информации о том, как использовать плагины Bootstrap.
И вы сделали! 🎉 Теперь, когда исходный код Bootstrap Sass и JS полностью загружены, ваш локальный сервер разработки должен выглядеть так.

Теперь вы можете начать добавлять любые компоненты Bootstrap, которые хотите использовать. Обязательно ознакомьтесь с полным примером проекта Vite , чтобы узнать, как включить дополнительный пользовательский Sass и оптимизировать свою сборку, импортируя только те части Bootstrap CSS и JS, которые вам нужны.

Видите здесь что-то неправильное или устаревшее? Пожалуйста , откройте вопрос на GitHub . Нужна помощь в устранении неполадок? Найдите или начните обсуждение на GitHub.