Webpack
Naučite kako uključiti Bootstrap u svoj projekt koristeći Webpack.
Instaliranje Bootstrapa
Instalirajte bootstrap kao Node.js modul koristeći npm.
Uvoz JavaScripta
Uvezite Bootstrapov JavaScript dodavanjem ovog retka na ulaznu točku svoje aplikacije (obično index.js
ili app.js
):
import 'bootstrap';
Alternativno, po potrebi možete pojedinačno uvesti dodatke :
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap ovisi o jQuery i Popper , koji su navedeni u peerDependencies
svojstvu; to znači da ćete morati dodati oba u svoju package.json
upotrebu npm install --save jquery popper.js
.
Uvoz stilova
Uvoz unaprijed kompajliranog Sass-a
Da biste uživali u punom potencijalu Bootstrapa i prilagodili ga svojim potrebama, koristite izvorne datoteke kao dio procesa povezivanja vašeg projekta.
Najprije izradite vlastiti _custom.scss
i upotrijebite ga za nadjačavanje ugrađenih prilagođenih varijabli . Zatim upotrijebite svoju glavnu Sass datoteku za uvoz prilagođenih varijabli, nakon čega slijedi Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Da bi se Bootstrap kompilirao, provjerite jeste li instalirali i koristili potrebne učitavače: sass-loader , postcss-loader s Autoprefixer -om . Uz minimalno postavljanje, vaša konfiguracija webpacka trebala bi uključivati ovo pravilo ili slično:
...
{
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
}]
},
...
Uvoz kompiliranog CSS-a
Alternativno, možete koristiti Bootstrapov CSS spreman za korištenje jednostavnim dodavanjem ovog retka na ulaznu točku vašeg projekta:
import 'bootstrap/dist/css/bootstrap.min.css';
U ovom slučaju možete koristiti svoje postojeće pravilo za css
bez ikakvih posebnih izmjena u konfiguraciji webpacka, osim što vam ne trebaju sass-loader
samo style-loader i css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...