Webpack sy bundlers
Ianaro ny fomba fampidirana Bootstrap amin'ny tetikasanao amin'ny fampiasana Webpack na bundler hafa.
Fametrahana Bootstrap
Mametraka bootstrap ho modely Node.js mampiasa npm.
Manafatra JavaScript
Ampidiro ny JavaScript an'ny Bootstrap amin'ny fampidirana ity andalana ity amin'ny idiran'ny fampiharana anao (matetika index.js
na app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Raha tsy izany, raha vitsivitsy amin'ireo plugins ihany no ilainao dia azonao atao ny manafatra plugins tsirairay araka izay ilaina:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap dia miankina amin'ny Popper , izay voafaritra ao amin'ny peerDependencies
fananana. Midika izany fa tsy maintsy azonao antoka fa ampidirinao amin'ny package.json
fampiasanao izany npm install @popperjs/core
.
Manafatra Styles
Manafatra Sass precompiled
Raha te hankafy ny fahafahan'ny Bootstrap feno sy amboary izany amin'ny filanao, ampiasao ny rakitra loharano ho ampahany amin'ny fizotran'ny tetikasanao.
Voalohany, mamorona anao manokana _custom.scss
ary ampiasao izany hanesorana ireo fari-pahaiza-manao namboarina . Avy eo, ampiasao ny rakitra Sass lehibenao hanafatra ny fari-piainanao manokana, arahin'ny Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Mba hanangonana ny Bootstrap dia ataovy azo antoka fa mametraka sy mampiasa ireo loader ilaina ianao: sass-loader , postcss-loader miaraka amin'ny Autoprefixer . Miaraka amin'ny fananganana kely indrindra, ny config webpack-nao dia tokony ahitana ity fitsipika ity na mitovitovy:
// ...
{
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'
}]
}
// ...
Manafatra CSS natambatra
Raha tsy izany, azonao atao ny mampiasa CSS efa vonona hampiasaina amin'ny Bootstrap amin'ny fampidirana fotsiny ity andalana ity amin'ny teboka fidirana amin'ny tetikasanao:
import 'bootstrap/dist/css/bootstrap.min.css';
Amin'ity tranga ity dia azonao atao ny mampiasa ny fitsipika efa misy anao css
raha tsy misy fanovana manokana amin'ny config webpack, afa-tsy ianao tsy mila sass-loader
style -loader sy css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...