Webpack
Learje hoe't jo Bootstrap opnimme yn jo projekt mei Webpack.
Ynstallaasje fan Bootstrap
Ynstallearje bootstrap as in Node.js-module mei npm.
JavaSkript ymportearje
Ymportearje Bootstrap's JavaScript troch dizze rigel ta te foegjen oan it yngongspunt fan jo app (normaal index.js
of app.js
):
import 'bootstrap';
As alternatyf kinne jo plugins yndividueel ymportearje as nedich:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap hinget ôf fan jQuery en Popper , dy't oantsjutte yn it peerDependencies
pân; dit betsjut dat jo derfoar soargje moatte dat jo beide tafoegje oan jo package.json
gebrûk npm install --save jquery popper.js
.
Ymportearje Styles
Ymportearje Precompiled Sass
Om it folsleine potensjeel fan Bootstrap te genietsjen en it oan te passen oan jo behoeften, brûk de boarnebestannen as ûnderdiel fan it bondelproses fan jo projekt.
Meitsje earst jo eigen en brûk it om de ynboude oanpaste fariabelen_custom.scss
te oerskriuwen . Brûk dan jo haad Sass-bestân om jo oanpaste fariabelen te ymportearjen, folge troch Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Foar Bootstrap om te kompilearjen, soargje derfoar dat jo de fereaske loaders ynstallearje en brûke: sass-loader , postcss-loader mei Autoprefixer . Mei minimale opset moat jo webpack-konfiguraasje dizze regel as ferlykber befetsje:
...
{
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
}]
},
...
It ymportearjen fan kompilearre CSS
As alternatyf kinne jo Bootstrap's ready-to-use CSS brûke troch gewoan dizze rigel ta te foegjen oan it yngongspunt fan jo projekt:
import 'bootstrap/dist/css/bootstrap.min.css';
Yn dit gefal meie jo jo besteande regel brûke foar css
sûnder spesjale oanpassingen oan webpack-konfiguraasje, útsein dat jo net sass-loader
allinich style-loader en css-loader nedich binne .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...