Introduction à Bootstrap Loader

Bootstrap Loader est un chargeur Webpack permettant d'intégrer de manière modulaire les composants CSS et JavaScript de Bootstrap. Il supporte Bootstrap 3 et 4, offrant des fonctionnalités de personnalisation avancées via SASS.

Procédure d'installation

1. Installation des dépendances principales

Pour démarrer, installez Bootstrap Loader via npm :

npm install bootstrap-loader

2. Sélection de la version de Bootstrap

Choisissez la version appropriée de Bootstrap :

# Pour Bootstrap 3
npm install bootstrap-sass

# Pour Bootstrap 4
npm install bootstrap

3. Ajout des chargeurs nécessaires

Installez les chargeurs requis pour le traitement des fichiers :

npm install css-loader node-sass resolve-url-loader sass-loader style-loader url-loader
npm install imports-loader exports-loader
# Pour Bootstrap 4, incluez également postcss-loader
npm install postcss-loader

Configuration initiale

Intégration dans le point d'entrée Webpack

Ajoutez Bootstrap Loader dans la configuration de votre projet Webpack :

module.exports = {
  entry: ['./src/bootstrap-loader.js', './src/application.js'],
  // ... autres paramètres
};

Fichier de configuration personnalisé

Créez un fichier de configuration à la racine, par exemple en YAML :

version: 4
styleLoaders:
  - style-loader
  - css-loader
  - postcss-loader
  - sass-loader
applyStyles: false
components:
  normalize: true
  print: true
scripts:
  alert: true
  button: true

Personnalisation des styles

Surcharges des variables SASS

Utilisez les champs de configuration pour étendre ou modifier les variables Boootstrap :

preBootstrapCustomizations: ./config/vars-before.scss
postBootstrapCustomizations: ./config/vars-after.scss

Exemple de modification de couleurs dans vars-before.scss :

// vars-before.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

Intégration de styles de l'application

Spécifiez le fichier de styles principal de votre application :

appStyles: ./styles/app.scss

Fonctionnalités avancées

Gestion de plusieurs thèmes

Pour supporter plusieurs thèmes, configurez plusieurs points d'entrée dans Webpack et créez des fichiers de configuration distincts. Des exemples sont disponibles dans le dossier examples/.

Utilisation avec les thèmes Bootswatch

Pour intégrer un thème Bootswatch :

1. Téléchargez les fichiers _variables.scss et _bootswatch.scss du thème sélectionné.
2. Définissez un fichier d'entrée pour le thème :

// bootswatch-entry.scss
@import './_bootswatch';

4. Ajustez la configuration pour inclure ces fichiers via preBootstrapCustomizations et appStyles.

Configuration des dépendances pour Bootstrap 4

Ajoutez le plugin ProvidePlugin dans votre configuration Webpack pour résoudre les dépendances :

const webpack = require('webpack');

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
]

Résolution des problèmes courants

Gestion de jQuery

Configurez le chargeur imports-loader pour les fichiers Bootstrap :

module: {
  rules: [
    {
      test: /bootstrap[\/\\]dist[\/\\]js[\/\\]umd[\/\\]/,
      use: 'imports-loader?jQuery=jquery'
    }
  ]
}

Chargement des fichiers de polices

Mettez en place les chargeurs pour les polices et icônes :

module: {
  rules: [
    { test: /\.(woff2?|svg)$/, use: 'url-loader?limit=10000' },
    { test: /\.(ttf|eot)$/, use: 'file-loader' }
  ]
}

Exemples et ressources

Le dépôt Bootstrap Loader contient des exemples pratiques dans le répertoire examples/, couvrant des cas d'usage variés comme les modules CSS et les configurations multiples.

Participation au projet

Pour contribuer, référez-vous au fichier CONTRIBUTING.md. Les tests unitaires sont situés dans node_package/tests/ pour valider les fonctionnalités.

Licence

Bootstrap Loader est distribué sous licence MIT.