Webpack kple bundlers ƒe agbalẽviwo
Srɔ̃ alesi nàde Bootstrap wò dɔa me to Webpack alo bundler bubuwo zazã me.
Bootstrap ƒe ɖoɖowɔwɔ
De bootstrap abe Node.js module ene to npm zazã me.
JavaScript ƒe tsɔtsɔ va dukɔa me
Tsɔ Bootstrap ƒe JavaScript la va to fli sia tsɔtsɔ kpe ɖe wò dɔwɔnua ƒe teƒe si nàge ɖo ŋu (zi geɖe la, index.js
alo app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Alo ne míaƒe kpeɖeŋutɔ ʋɛ aɖewo koe nèhiã la, àte ŋu atsɔ kpeɖeŋutɔawo ɖekaɖeka ne ehiã:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap nɔ te ɖe Popper , si wogblɔ le peerDependencies
nunɔamesi la me dzi. Esia fia be ahiã be nàkpɔ egbɔ be yetsɔe kpe ɖe wò package.json
zazã npm install @popperjs/core
ŋu .
Atsyãwo tsɔtsɔ va dukɔa me
Sass si Woƒo Ƒu Do Ŋgɔ la tsɔtsɔ va dukɔa me
Be nàse vivi na Bootstrap ƒe ŋutete bliboa eye nàtrɔ asi le eŋu wòasɔ ɖe wò hiahiãwo nu la, zã dzɔtsoƒe faɛlwo abe wò dɔa ƒe ƒuƒoƒo ƒe ɖoɖoa ƒe akpa aɖe ene.
Gbã la, wɔ tɔwò _custom.scss
eye nàzãe atsɔ axe mɔ ɖe custom variables siwo wotu ɖe eme la nu . Emegbe, zã wò Sass faɛl vevitɔ nàtsɔ axɔ wò tɔtrɔ siwo nèwɔ ɖe ɖoɖo nu, eye nàtsɔ Bootstrap akplɔe ɖo:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Be Bootstrap naƒo ƒu la, kpɔ egbɔ be yede agbatsɔnu siwo hiã la eye yezã wo: sass-loader , postcss-loader kple Autoprefixer . Ne èwɔ ɖoɖo sue aɖe ko la, ele be wò webpack ƒe ɖoɖowɔɖia nade se sia alo esi sɔ kplii me:
// ...
{
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 si Woƒo Ƒu la Ƒe Xɔxɔ
Alo, àteŋu azã Bootstrap ƒe CSS si sɔ na zazã to fli sia tsɔtsɔ kpe ɖe wò dɔa ƒe gegeɖeƒe ŋu ko me:
import 'bootstrap/dist/css/bootstrap.min.css';
Le nɔnɔme sia me la, àteŋu azã wò se si li fifia na tɔtrɔ tɔxɛ aɖeke manɔmee le webpack config ŋu, negbe ɖeko css
mèhiã style-loader kple css-loader ko o.sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...