Webpack
Дізнайтеся, як включити Bootstrap у свій проект за допомогою Webpack.
Встановлення Bootstrap
Встановіть bootstrap як модуль Node.js за допомогою npm.
Імпорт JavaScript
Імпортуйте JavaScript Bootstrap, додавши цей рядок до точки входу вашої програми (зазвичай index.js
або app.js
):
import 'bootstrap';
Крім того, ви можете імпортувати плагіни окремо за потреби:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap залежить від jQuery та Popper , які вказані у peerDependencies
властивості; це означає, що ви повинні обов’язково додати їх обидва до свого package.json
використання npm install --save jquery popper.js
.
Імпорт стилів
Імпорт попередньо скомпільованого Sass
Щоб насолодитися повним потенціалом Bootstrap і налаштувати його відповідно до своїх потреб, використовуйте вихідні файли як частину процесу об’єднання проекту.
Спочатку створіть власний _custom.scss
і використовуйте його для заміни вбудованих користувацьких змінних . Потім скористайтеся основним файлом Sass, щоб імпортувати власні змінні, а потім Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Щоб компілювати Bootstrap, переконайтеся, що ви встановили та використовуєте необхідні завантажувачі: sass-loader , postcss-loader із Autoprefixer . За мінімальних налаштувань конфігурація веб-пакета повинна містити це правило чи подібне:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
Імпорт скомпільованого 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']
}
]
}
...