Webpack
Lär dig hur du inkluderar Bootstrap i ditt projekt med hjälp av Webpack.
Installerar Bootstrap
Installera bootstrap som en Node.js-modul med npm.
Importera JavaScript
Importera Bootstraps JavaScript genom att lägga till den här raden till appens ingångspunkt (vanligtvis index.js
eller app.js
):
Alternativt kan du importera plugins individuellt efter behov:
Bootstrap är beroende av jQuery och Popper , dessa definieras som peerDependencies
, detta betyder att du måste se till att lägga till båda i din package.json
användning npm install --save jquery popper.js
.
Importera stilar
Importera förkompilerad Sass
För att dra nytta av Bootstraps fulla potential och anpassa den efter dina behov, använd källfilerna som en del av ditt projekts paketeringsprocess.
Skapa först din egen _custom.scss
och använd den för att åsidosätta de inbyggda anpassade variablerna . Använd sedan din Sass-huvudfil för att importera dina anpassade variabler, följt av Bootstrap:
För att Bootstrap ska kompileras, se till att du installerar och använder de nödvändiga laddarna: sass-loader , postcss-loader med Autoprefixer . Med minimal konfiguration bör din webbpaketskonfiguration innehålla denna regel eller liknande:
Importerar kompilerad CSS
Alternativt kan du använda Bootstraps färdiga CSS genom att helt enkelt lägga till den här raden till ditt projekts startpunkt:
I det här fallet kan du använda din befintliga regel css
utan några speciella modifieringar av webpack-konfiguration, förutom att du inte sass-loader
bara behöver style-loader och css-loader .