Webpack
Naučite kako da uključite Bootstrap u svoj projekat koristeći Webpack.
Instaliranje Bootstrapa
Instalirajte bootstrap kao Node.js modul koristeći npm.
Uvoz JavaScripta
Uvezite Bootstrap JavaScript dodavanjem ove linije na ulaznu tačku vaše aplikacije (obično index.js
ili app.js
):
import 'bootstrap';
Alternativno, možete uvesti dodatke pojedinačno po potrebi:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap zavisi od jQueryja i Poppera , koji su specificirani u peerDependencies
svojstvu; to znači da ćete morati paziti da ih oba dodate u svoju package.json
upotrebu npm install --save jquery popper.js
.
Uvoz stilova
Uvoz prekompiliranog Sass
Da biste uživali u punom potencijalu Bootstrapa i prilagodili ga svojim potrebama, koristite izvorne datoteke kao dio procesa povezivanja vašeg projekta.
Prvo, kreirajte svoj vlastiti _custom.scss
i koristite ga da nadjačate ugrađene prilagođene varijable . Zatim koristite svoju glavnu Sass datoteku da uvezete svoje prilagođene varijable, nakon čega slijedi Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Da bi se Bootstrap kompajlirao, pobrinite se da instalirate i koristite potrebne učitavače: sass-loader , postcss-loader sa Autoprefixer -om . Uz minimalno podešavanje, vaša webpack konfiguracija bi trebala 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 kompajliranog CSS-a
Alternativno, možete koristiti Bootstrap-ov CSS spreman za korištenje jednostavnim dodavanjem ove linije na ulaznu tač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 modifikacija konfiguracije webpacka, osim što vam ne trebaju sass-loader
samo style-loader i css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...