Webpack na ba bundlers
Yekola ndenge ya kokotisa Bootstrap na projet na yo na nzela ya Webpack to ba bundlers misusu.
Kokɔtisa Bootstrap
Botia bootstrap lokola module ya Node.js na kosalelaka npm.
Kokɔtisa JavaScript na kati
Importer JavaScript ya Bootstrap na kobakisa ligne oyo na point d'entrée ya app na yo (mbala mingi index.js
to app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Na lolenge mosusu, soki ozali na mposa kaka ya mwa ba plugins na biso, okoki kokɔtisa ba plugins mokomoko soki esengeli:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap etali Popper , oyo elakisami na peerDependencies
propriété. Yango elingi koloba ete ekosɛnga osala makasi mpo na kobakisa yango na ndenge oyo ozali package.json
kosalela npm install @popperjs/core
.
Kokɔtisa Ba Style
Kokɔtisa Sass oyo esalemi liboso
Mpo na kosepela na makoki nyonso ya Bootstrap mpe kosala yango na kotalela bamposa na yo, salelá bafichiers ya source lokola eteni ya mosala ya kosangisa biloko ya mosala na yo.
Ya liboso, salá oyo ya yo moko _custom.scss
mpe salelá yango mpo na koboya ba variables personnalisées oyo etongami na kati . Na sima, salelá fichier na yo ya Sass ya monene mpo na kokɔtisa ba variables na yo ya personnalisé, na nsima Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Mpo Bootstrap e compiler, sala que o installer pe osalela ba chargeurs oyo esengeli: sass-loader , postcss-loader na Autoprefixer . Na configuration minimale, config na yo ya webpack esengeli ezala na mobeko oyo to oyo ekokani na yango:
// ...
{
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'
}]
}
// ...
Kokɔtisa CSS oyo esangisami
Na lolenge mosusu, okoki kosalela CSS ya Bootstrap oyo ezali prêt à utiliser na kobakisa kaka ligne oyo na point d’entrée ya projet na yo:
import 'bootstrap/dist/css/bootstrap.min.css';
Na cas oyo okoki kosalela mobeko na yo oyo ezali mpo na css
kozanga mbongwana ya sipesiale na webpack config, longola kaka ete ozali na mposa ya sass-loader
kaka style-loader mpe css-loader te .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...