Webpack leh bundler te pawh a awm bawk
Webpack emaw bundler dang emaw hmanga i project-a Bootstrap telh dan zir rawh.
Bootstrap install dan tur
bootstrap chu Node.js module angin npm hmangin install rawh.
JavaScript import dan tur
Bootstrap -a JavaScript chu i app entry point-ah he line hi dah la (a tlangpuiin index.js
emaw app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
A nih loh leh kan plugin tlemte chauh i mamawh chuan a tul angin plugin pakhat zel i import thei bawk :
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap hi Popper ah a innghat a , chu chu peerDependencies
property ah hian tarlan a ni. Chumi awmzia chu i package.json
hmannaah i dah tel ngei ngei a ngai dawn tihna a npm install @popperjs/core
ni .
Style hrang hrang import dan
Precompiled Sass tihchhuah a ni
Bootstrap thiltihtheihna zawng zawng hmang tangkai tur leh i mamawh ang zela siam tur chuan source files te chu i project bundling process ah hmang la.
A hmasa berin nangmah ngeiin siam la, chu chu hmang la, built-in custom variables te_custom.scss
chu override rawh . Tichuan, i main Sass file hmangin i custom variable te chu import la, Bootstrap hmangin i rawn lut leh ang:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Bootstrap compile tur chuan loader mamawh te chu install leh hman ngei ngei tur a ni: sass-loader , postcss-loader with Autoprefixer . Setup tlem ber nen chuan i webpack config ah hian he rule emaw a ang chi emaw hi a tel tur a ni:
// ...
{
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'
}]
}
// ...
Compiled CSS tihchhuah a ni
A dang pawhin Bootstrap-a hman theih tura inpeih tawh CSS chu i project entry point-ah he line hi dah maiin i hmang thei bawk ang:
import 'bootstrap/dist/css/bootstrap.min.css';
Chutiang a nih chuan i rule awmsa chu webpack config-a siam danglamna bik awm lovin i hmang thei ang , style-loader leh css- loader chauh css
i mamawh loh tih loh chu .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...