Webpack
Узнайте, как включить Bootstrap в свой проект используя Webpack.
Установка
Установите bootstrap как модуль node с помощью npm.
Импорт JavaScript
Импортируйте файлы JavaScript бутстрапа добавлением этой строки в «точку входа» вашего приложения (обычно index.js
или app.js
):
Или вы можете импортировать нужные плагины по отдельности:
Bootstrap зависим от jQuery и Popper, они определяются как peerDependencies
, это означает, что вам нужно будет обязательно добавить оба из них в ваш package.json
используя npm install --save jquery popper.js
.
Импорт стилей
Импорт прекомпилированных SASS
Для полного функционала и возможности настройки Bootstrap используйте исходные файлы при «сборке» вашего проекта.
Сперва создайте файл _custom.scss
и переопределите значения встроенных переменных. Затем используйте свой основной файл sass для импорта пользовательских переменных, за которым следует Bootstrap:
Для компиляции удостоверьтесь, что установлены все требуемые загрузчики: sass-loader, postcss-loader с Autoprefixer. С минимальными настройками, ваша конфигурация вебпака должна включать подобное правило:
Импорт компилированного СSS
Еще один путь – использование готового CSS добавлением этой строки в точку входа вашего проекта:
В этом случае вы можете использовать ваше правило css
без каких-либо модификаций конфигурации вебпака за исключением того, что вам не нужен только sass-loader
style-loader и css-loader.