Webpack thiab bundleers
Kawm paub yuav ua li cas suav nrog Bootstrap hauv koj qhov project siv Webpack lossis lwm cov bundler.
Txhim kho Bootstrap
Nruab bootstrap raws li Node.js module siv npm.
Importing JavaScript
Ntshuam Bootstrap's JavaScript los ntawm kev ntxiv cov kab no rau koj lub app nkag nkag (feem ntau index.js
lossis app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Xwb, yog tias koj tsuas xav tau qee qhov ntawm peb cov plugins, koj tuaj yeem import plugins ib tus zuj zus raws li xav tau:
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap nyob ntawm Popper , uas tau teev tseg hauv cov peerDependencies
cuab yeej. Qhov no txhais tau tias koj yuav tau ua kom paub tseeb tias yuav ntxiv nws rau koj package.json
siv npm install @popperjs/core
.
Importing Styles
Importing Precompiled Sass
Txhawm rau txaus siab rau tag nrho cov peev txheej ntawm Bootstrap thiab kho nws rau koj cov kev xav tau, siv cov ntaub ntawv los ua ib feem ntawm koj qhov project bundling txheej txheem.
Ua ntej, tsim koj tus kheej _custom.scss
thiab siv nws los hla cov kev hloov pauv hauv kev cai . Tom qab ntawd, siv koj cov ntaub ntawv Sass tseem ceeb los import koj cov kev cai hloov pauv, ua raws li Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Rau Bootstrap los sau ua ke, nco ntsoov tias koj nruab thiab siv cov loaders xav tau: sass-loader , postcss-loader nrog Autoprefixer . Nrog kev teeb tsa tsawg, koj lub webpack config yuav tsum suav nrog txoj cai no lossis zoo sib xws:
// ...
{
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'
}]
}
// ...
Importing Compiled CSS
Xwb, koj tuaj yeem siv Bootstrap's npaj-rau-siv CSS los ntawm kev ntxiv cov kab no rau koj qhov project nkag nkag:
import 'bootstrap/dist/css/bootstrap.min.css';
Hauv qhov no koj tuaj yeem siv koj txoj cai uas twb muaj lawm rau css
yam tsis muaj kev hloov kho tshwj xeeb rau webpack config, tshwj tsis yog koj tsis xav tau sass-loader
style -loader thiab css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...