Cómo incluir Bootstrap a un proyecto usando Webpack

Por Luis Carlos Pando ( @mijo) hace 4 años · 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. 😎

#Bootstrap #Node.js #npm #Sass #Web dev #Webpack

Comentarios
¡Nuevo!

Para comentar aquí basta con mandarme un reply o interactuar de alguna manera con el toot de este post (darle like o darle boost) vía Mastodon (las razones las explico aquí). Si no tienes cuenta y aún así te gustaría decirme algo, entonces me puedes contactar en [email protected] o Discord.

¡El Mode 7 Grand Prix está en vivo!