Webpack

Установка Bootstrap

Установите bootstrap как модуль Node.js с помощью npm.

Импорт JavaScript

Импортируйте Bootstrap’s JavaScript, добавив эту строку в точку входа вашего приложения (обычно index.js или app.js):

import'bootstrap';// или получить все названные экспорты для дальнейшего использования
import*asbootstrapfrom'bootstrap';

В качестве альтернативы, если Вам нужно всего несколько наших плагинов, Вы можете импортировать плагины по отдельности по мере необходимости:

importAlertfrom'bootstrap/js/dist/alert';// или укажите, какие плагины вам нужны:
import{Tooltip,Toast,Popover}from'bootstrap';

Bootstrap зависит от Popper, который указан в свойстве peerDependencies. Это означает, что Вам нужно обязательно добавить его в свой package.json используя npm install @popperjs/core.

Импорт стилей

Импорт предварительно скомпилированного Sass

Для полного функционала и возможности настройки Bootstrap используйте исходные файлы при «сборке» вашего проекта.

Сперва создайте файл _custom.scss и переопределите значения встроенных переменных. Затем используйте свой основной файл sass для импорта ваших пользовательских переменных, а затем Bootstrap:

@import"custom";@import"~bootstrap/scss/bootstrap";

Для компиляции удостоверьтесь, что установлены все требуемые загрузчики: sass-loader, postcss-loader с Autoprefixer. С минимальными настройками, ваша конфигурация webpack должна включать подобное правило:

// ...
{test:/\.(scss)$/,use:[{// вставить CSS на страницу
loader:'style-loader'},{// переводит CSS в модули CommonJS
loader:'css-loader'},{// Выполнить действия postcss
loader:'postcss-loader',options:{// `postcssOptions` требуется для postcss 8.x;
// если Вы используете postcss 7.x пропустите ключ
postcssOptions:{// плагины postcss, можно экспортировать в postcss.config.js
plugins:function(){return[require('autoprefixer')];}}}},{// компилирует Sass в CSS
loader:'sass-loader'}]}// ...

Импорт скомпилированного СSS

Еще один путь – использование готового CSS добавлением этой строки в точку входа вашего проекта:

import'bootstrap/dist/css/bootstrap.min.css';

В этом случае вы можете использовать существующее правило для css без каких-либо специальных изменений конфигурации webpack за исключением того, что вам не нужен только sass-loaderstyle-loader и css-loader.

// ...
module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']}]}// ...