Cómo incluir Bootstrap a un proyecto usando Webpack
¡Atención!
Este post ha sido marcado como obsoleto y su contenido podría no ser relevante en este punto del tiempo por lo que no debería de tomarse en cuenta. Sin embargo sigue existiendo con fines históricos y de preservación de la información.
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
$ 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. 😎
-
Kudos
- ¡Nuevo!