Cómo incluir Bootstrap a un proyecto usando Webpack

Por · Permalink

Esta guía la hago para tenerla como referencia para mi, pero igual puede serle de utilidad para alguien más. Esta guía permite hacer override de las variables nativas de Bootstrap e incluir componentes de Bootstrap a cualquier proyecto usando Webpack.

Configuración básica

Inicializar npm en el proyecto para generar un package.json, luego procedemos a instalar Webpack localmente:

  
     $ mkdir ejemplo && cd ejemplo
     $ npm init -y
     $ npm install webpack --save-dev
  

Luego hay que crear la siguiente estructura en el proyecto, para separar el directorio que contendrá el código fuente /src del directorio que contendrá el bundle para producción /dist.

  
     ejemplo
     |- package.json
+    |- /dist
+         |- index.html
+    |- /src
+         |- app.js
  

Instalar Bootstrap

Usar el siguiente comando para instalar Bootstrap y sus dependencias (jQuery y Popper.js):

  
     $ npm install bootstrap jquery popper.js --save
  

Si lo prefieres, puedes importar los plugins JavaScript de Bootstrap por separado conforme los vayas necesitando, para esto es necesario que instales exports-loader.

  
     $ npm install exports-loader --save-dev
  

En este punto será necesario instalar los loaders y plugins postcss necesarios para poder compilar y bundlear los archivos Sass precompilados.

  
     $ npm install autoprefixer css-loader node-sass postcss-loader sass-loader style-loader --save-dev
  

Archivo de configuración de Webpack

Hay que crear el archivo webpack.config.js. Esta configuración de ejemplo asume que se utilizarán los archivos Sass de Bootstrao como parte del proceso de bundleo del proyecto.

  
     const path = require('path');

     module.exports = {
       entry: './src/app.js',
       output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
       },
       module: {
         rules: [
           {
             test: /\.(scss)$/,
             use: [
               {
                 // Inyecta CSS al DOM con la etiqueta <style>
                 loader: 'style-loader'
               },
               {
                 // Interpreta @import y url() como import/require()
                 loader: 'css-loader'
               },
               {
                 // Loader de Webpack para procesar CSS con PostCSS
                 loader: 'postcss-loader',
                 options: {
                   plugins: function () {
                     return [
                       require('autoprefixer')
                     ];
                   }
                 }
               },
               {
                 // Carga un archivo Sass/Scss y lo compila a CSS
                 loader: 'sass-loader'
               }
             ]
           }
         ]
       }
     };
  

Importación del JS de Bootstrap

Tenemos que importar el JavaScript de Bootstrap para que sea bundleado por Webpack agregando esta línea al entry point de nuestro proyecto /src/app.js:

  
     import 'bootstrap';
  

Recuerda que también está la opción de incluir los plugins que necesites solamente:

  
     import 'bootstrap/js/dist/util';
     import 'bootstrap/js/dist/dropdown';
     .
     .
     .
  

Importar el Sass de Bootstrap

De igual manera es posible incluir todo el Sass de Bootstrap o solamente las partes que necesites. Para esto primero actualiza la estructura del proyecto e incluye un nuevo archivo /src/scss/app.scss.

  
     ejemplo
     |- package.json
     |- /dist
          |- index.html
     |- /src
          |- app.js
+         |- /scss
+              |- app.scss
  

Ahora si, importa el Sass de Bootstrap a tu proyecto con la siguiente línea de código en el archivo app.scss:

  
     @import "~bootstrap/scss/bootstrap";
  

De nueva cuenta te recuerdo que es posible importar solamente las partes de Bootstrap que necesites. Es importante recordar que lo que si es obligatorio incluir en el proyecto son las funciones, variables y mixins de Bootstrap.

  
     // Requerido
     @import "~bootstrap/scss/functions";
     @import "~bootstrap/scss/variables";
     @import "~bootstrap/scss/mixins";

     // Opcional
     @import "~bootstrap/scss/reboot";
     @import "~bootstrap/scss/type";
     @import "~bootstrap/scss/images";
     @import "~bootstrap/scss/code";
     @import "~bootstrap/scss/grid";
  

Por último, hay que incluir el Sass de Bootstrap al bundle añadiendo la siguiente línea al entry point del proyecto /src/app.js:

  
     import './scss/app.scss';
  

Generando el bundle con Webpack

Edita el archivo package.json del proyecto para agregar un nuevo script npm para correr el comando webpack.

  
     {
        "name": "ejemplo",
        "version": "1.0.0",
        "description": "",
        "main": "app.js",
        "scripts": {
+         "build": "webpack",
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "keywords": [],
        "author": "Luis Carlos Pando <[email protected]>",
        "license": "ISC",
        "devDependencies": {
          "autoprefixer": "^7.2.5",
          "css-loader": "^0.28.9",
          "exports-loader": "^0.6.4",
          "node-sass": "^4.7.2",
          "postcss-loader": "^2.0.10",
          "precss": "^3.0.0",
          "sass-loader": "^6.0.6",
          "style-loader": "^0.19.1",
          "webpack": "^3.10.0"
        },
        "dependencies": {
          "bootstrap": "^4.0.0",
          "jquery": "^3.2.1",
          "popper.js": "^1.12.9"
        }
     }
  

Con esto, ahora es posible ejecutar el comando npm run build en la terminal para generar el bundle (incluyendo Bootstrap) con Webpack. 😎

  • Comentarios

  • Nuevo
Solamente acepto comentarios de usuarios de GitHub (las razones las explico aquí). ¿No tienes cuenta y te gustaría decirme algo? Siempre me puedes contactar a través de [email protected], Twitter o Discord.
Si te gustó este post, por favor compártelo Twittear o sigue @luiscarlospando para recibir notificaciones.