Webpack et bundlers
Apprenez à inclure Bootstrap dans votre projet à l'aide de Webpack ou d'autres bundlers.
Installation de Bootstrap
Installez bootstrap en tant que module Node.js à l'aide de npm.
Importation de JavaScript
Importez le JavaScript de Bootstrap en ajoutant cette ligne au point d'entrée de votre application (généralement index.js
ou app.js
):
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
Alternativement, si vous n'avez besoin que de quelques-uns de nos plugins, vous pouvez importer des plugins individuellement selon vos besoins :
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
Bootstrap dépend de Popper , qui est spécifié dans la peerDependencies
propriété. Cela signifie que vous devrez vous assurer de l'ajouter à votre package.json
utilisation npm install @popperjs/core
.
Importation de styles
Importation de Sass précompilé
Pour profiter pleinement du potentiel de Bootstrap et le personnaliser selon vos besoins, utilisez les fichiers source dans le cadre du processus de regroupement de votre projet.
Tout d'abord, créez le vôtre _custom.scss
et utilisez-le pour remplacer les variables personnalisées intégrées . Ensuite, utilisez votre fichier Sass principal pour importer vos variables personnalisées, suivi de Bootstrap :
@import "custom";
@import "~bootstrap/scss/bootstrap";
Pour que Bootstrap compile, assurez-vous d'installer et d'utiliser les chargeurs requis : sass-loader , postcss-loader avec Autoprefixer . Avec une configuration minimale, votre configuration Webpack doit inclure cette règle ou similaire :
// ...
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: 'style-loader'
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}]
}
// ...
Importation de CSS compilé
Alternativement, vous pouvez utiliser le CSS prêt à l'emploi de Bootstrap en ajoutant simplement cette ligne au point d'entrée de votre projet :
import 'bootstrap/dist/css/bootstrap.min.css';
Dans ce cas, vous pouvez utiliser votre règle existante css
sans aucune modification particulière de la configuration de webpack, sauf que vous n'avez pas besoin sass-loader
uniquement de style-loader et de css-loader .
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...