Webpack і пакети
Дізнайтеся, як включити Bootstrap у ваш проект за допомогою Webpack або інших пакетів.
Встановлення Bootstrap
Встановіть bootstrap як модуль Node.js за допомогою npm.
Імпорт JavaScript
Імпортуйте JavaScript Bootstrap, додавши цей рядок до точки входу вашої програми (зазвичай index.js
або app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Крім того, якщо вам потрібні лише деякі з наших плагінів, ви можете імпортувати плагіни окремо за потреби:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap залежить від Popper , який вказано у peerDependencies
властивості. Це означає, що вам доведеться обов’язково додати його до свого package.json
використання npm install @popperjs/core
.
Імпорт стилів
Імпорт попередньо скомпільованого Sass
Щоб насолодитися повним потенціалом Bootstrap і налаштувати його відповідно до своїх потреб, використовуйте вихідні файли як частину процесу об’єднання проекту.
Спочатку створіть власний _custom.scss
і використовуйте його для заміни вбудованих користувацьких змінних . Потім скористайтеся основним файлом Sass, щоб імпортувати власні змінні, а потім Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Для компіляції Bootstrap переконайтеся, що ви встановили та використовуєте необхідні завантажувачі: sass-loader , postcss-loader з Autoprefixer . За мінімальних налаштувань конфігурація веб-пакета повинна містити це правило чи подібне:
// ...
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
}
// ...
Імпорт скомпільованого CSS
Крім того, ви можете використовувати готовий до використання CSS Bootstrap, просто додавши цей рядок до точки входу вашого проекту:
import 'bootstrap/dist/css/bootstrap.min.css';
У цьому випадку ви можете використовувати своє існуюче правило css
без будь-яких спеціальних змін у конфігурації webpack, за винятком того, що вам не потрібні sass-loader
лише style-loader і css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...