Webpack

Установка Bootstrap

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

Импорт JavaScript

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

// Вы можете указать, какие плагины Вам нужны
import{Tooltip,Toast,Popover}from'bootstrap';

Или вы можете импортировать нужные плагины по отдельности:

importAlertfrom'bootstrap/js/dist/alert';...

Bootstrap зависит от Popper, который указан в свойстве peerDependencies. Это означает, что вам нужно будет обязательно добавить оба из них в ваш package.json используя npm install popper.js.

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

Импорт предварительно скомпилированного 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']}]}// ...