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
):
Alternativno, možete uvesti dodatke pojedinačno po potrebi:
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:
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:
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:
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 .