I-Webpack
Funda indlela yokufaka i-Bootstrap kuphrojekthi yakho usebenzisa i-Webpack 3.
Faka i-bootstrap njengemojuli ye-Node.js usebenzisa i-npm.
Ngenisa i-JavaScript ye-Bootstrap ngokwengeza lo mugqa endaweni yokungena yohlelo lwakho lokusebenza (ngokuvamile index.js
noma app.js
):
import 'bootstrap';
Kungenjalo, ungangenisa ama- plugin ngawodwana njengoba kudingeka:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...
I-Bootstrap incike ku- jQuery ne- Popper , lezi zichazwa ngokuthi peerDependencies
, lokhu kusho ukuthi kuzodingeka uqiniseke ukuthi uyakwengeza kokubili ekusebenziseni package.json
kwakho npm install --save jquery popper.js
.
Qaphela ukuthi uma ukhetha ukungenisa ama-plugin ngawodwana , kufanele futhi ufake i -exports-loader
Ukuze ujabulele amandla aphelele e-Bootstrap futhi uyenze ngendlela oyifisayo ngokwezidingo zakho, sebenzisa amafayela omthombo njengengxenye yenqubo yokuhlanganisa yephrojekthi yakho.
Okokuqala, zenzele eyakho _custom.scss
futhi usebenzise yona ukuze ukhiphe okuguquguqukayo okwakhelwe ngaphakathi . Bese, sebenzisa ifayela lakho le-sass eliyinhloko ukungenisa okuguquguqukayo kwakho ngokwezifiso, kulandelwa yi-Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Ukuze i-Bootstrap ihlanganise, qiniseka ukuthi uyafaka futhi usebenzisa izilayishi ezidingekayo: sass-loader , postcss-loader nge - Autoprefixer . Ngokusetha okuncane, ukulungiselelwa kwepakethi yakho yewebhu kufanele kufake lo mthetho noma okufanayo:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
Kungenjalo, ungasebenzisa i-css ye-Bootstrap elungele ukusetshenziswa ngokumane wengeze lo mugqa endaweni yokungena yephrojekthi yakho:
import 'bootstrap/dist/css/bootstrap.min.css';
Kulokhu ungasebenzisa umthetho wakho okhona ngaphandle kokulungiswa okukhethekile kwe-webpack config ngaphandle css
kokuthi awudingi isilayishi sesitayela kanye ne -css-loader .sass-loader
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...