Webpack
Leer hoe u Bootstrap in uw project kunt opnemen met Webpack.
Bootstrap installeren
Installeer bootstrap als een Node.js-module met npm.
JavaScript importeren
Importeer JavaScript van Bootstrap door deze regel toe te voegen aan het toegangspunt van uw app (meestal index.js
of app.js
):
import 'bootstrap';
Als alternatief kunt u indien nodig plug-ins afzonderlijk importeren :
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap is afhankelijk van jQuery en Popper , die in de peerDependencies
eigenschap worden gespecificeerd; dit betekent dat u ervoor moet zorgen dat u ze allebei aan uw package.json
gebruik toevoegt npm install --save jquery popper.js
.
Stijlen importeren
Vooraf gecompileerde Sass importeren
Om het volledige potentieel van Bootstrap te benutten en het aan uw behoeften aan te passen, gebruikt u de bronbestanden als onderdeel van het bundelingsproces van uw project.
Maak eerst uw eigen variabelen en gebruik deze om de ingebouwde aangepaste variabelen_custom.scss
te overschrijven . Gebruik vervolgens uw hoofd Sass-bestand om uw aangepaste variabelen te importeren, gevolgd door Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Om Bootstrap te compileren, moet u ervoor zorgen dat u de vereiste laders installeert en gebruikt: sass-loader , postcss-loader met Autoprefixer . Met minimale instellingen zou uw webpack-configuratie deze regel of iets dergelijks moeten bevatten:
...
{
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
}]
},
...
Gecompileerde CSS importeren
Als alternatief kunt u de kant-en-klare CSS van Bootstrap gebruiken door simpelweg deze regel toe te voegen aan het startpunt van uw project:
import 'bootstrap/dist/css/bootstrap.min.css';
In dit geval kunt u uw bestaande regel gebruiken css
zonder speciale aanpassingen aan de webpack-configuratie, behalve dat u niet sass-loader
alleen style-loader en css-loader nodig heeft .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...