Webpack a ni
Webpack 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';
A nih loh leh, a tul angin plugins pakhat zel i import thei bawk :
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap hi jQuery leh Popper -ah a innghat a , chungte chu property-ah hian tarlan a ni a peerDependencies
; package.json
hei hian a awmzia chu i hmannaah an pahnih hian i belh ngei ngei tur a npm install --save jquery popper.js
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: [{
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
}]
},
...
Compiled CSS tihchhuah a ni
A nih loh leh, Bootstrap-a hman theih tura inpeih tawh CSS chu i project entry point-ah he line hi dah mai 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']
}
]
}
...