I-Webpack
Funda indlela yokufaka i-Bootstrap kuphrojekthi yakho usebenzisa i-Webpack.
Ifaka i-Bootstrap
Faka i-bootstrap njengemojuli ye-Node.js usebenzisa i-npm.
Ingenisa i-JavaScript
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/alert';
...
I-Bootstrap incike ku- jQuery ne- Popper , eshiwo endaweni peerDependencies
; lokhu kusho ukuthi kuzodingeka wenze isiqiniseko sokungeza zombili ekusebenziseni package.json
kwakho npm install --save jquery popper.js
.
Ukungenisa Izitayela
Ingenisa i-Sass Ehlanganisiwe
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 eliyinhloko le-Sass 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 postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
Ingenisa I-CSS Ehlanganisiwe
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 css
ngaphandle kokulungiswa okukhethekile kwe-webpack config, ngaphandle kokuthi awudingi sass-loader
nje isilayishi sesitayela kanye ne -css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...