Webpack
Kawm paub yuav ua li cas suav nrog Bootstrap hauv koj qhov project siv Webpack.
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';
Xwb, koj tuaj yeem import plugins ib tus zuj zus raws li xav tau:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap nyob ntawm jQuery thiab Popper , uas tau teev tseg hauv cov peerDependencies
cuab yeej; Qhov no txhais tau hais tias koj yuav tau ua kom paub tseeb tias ntxiv ob qho tib si rau koj package.json
siv npm install --save jquery popper.js
.
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: [{
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
}]
},
...
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']
}
]
}
...