/ Laravel

La manera correcta de configurar Bootstrap 4 en Laravel 5.5

Despues de realizar una busqueda intensiva de como actualizar Bootstrap 4 en un proyecto laravel 5.5 he decidido compartir la solución que he encontrado.

gestionando dependencias NPM

Remover Librerias Botstrap 3 Sass

$ npm uninstall bootstrap-sass --save-dev

yo uso el indicador --save-dev para que la libreria se elimine del archivo package.json.

Bootstrap 4 depende de JQuery y también de la biblioteca Popper.js. Laravel ya ha incluido JQuery. Entonces todo lo que tenemos que hacer es instalar Bootstrap 4 y Popper.js. Haremos eso ahora ...

$ npm install bootstrap@4.0.0 --save-dev

Después de la instalación, debería recibir una advertencia de NPM que le muestra que hay dependencias que aún no están instaladas. ¡Importante! No es necesario que guardemos una nueva dependencia de JQuery en nuestro archivo package.json. Laravel ya tiene esta configuración por nosotros.

Instalar la biblioteca Popper.js

$ npm install popper.js --save-dev

En package.json debe haber cambiar la linea donde se define “bootstrap-sass”: “^3.x.x” por la linea:
"bootstrap": "^4.0.0",

Ahora podemos ejecutar npm install para instalar todo de acuerdo con el archivo package.json. Lo que esto hará es traer a JQuery y también a las otras dependencias.

$ npm install

Actualizar referencias en el codigo

En este punto, hemos instalado todas las librerias y archivos necesarios, solo tenemos que consultarlos correctamente ahora. Para comenzar, editaremos el archivo bootstrap.js que se encuentra en la carpeta /resources/assets/js/. Todo lo que tenemos que hacer es actualizar el requerimiento para decir "bootstrap" en lugar de "bootstrap-sass". Para mayor claridad, he dejado el comentario anterior para que pueda ver lo que debe eliminarse.

try {
    window.$ = window.jQuery = require('jquery');
    //window.Popper = require('popper.js');

    //require('bootstrap-sass');
    require('bootstrap');
} catch (e) {}

A continuación, tenemos que importar los archivos correctos en nuestra app.scss. Actualmente está intentando importar los viejos archivos de Bootstrap 3. Hagamos eso ahora ... Abra el archivo app.scss que se encuentra en la carpeta resources /assets/sass/. Cámbielo para que se vea como el siguiente:

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

@import "variables";

@import "~bootstrap/scss/bootstrap";

Finalmente, gestionemos las anulaciones de SASS

En la versión 4, Bootstrap pasó de usar píxeles (px) internamente a usar unidades rem. Vea la publicación del blog aquí donde uno de los puntos explica la migración. Lo que esto significa para nosotros es que nuestras anulaciones SASS necesitan usar las mismas unidades cuando se trata de tamaños de fuente, etcétera. Laravel tiene algunas anulaciones estándar ya incluidas en el proyecto. Para permitir que nuestro proyecto se ejecute correctamente, necesitamos cambiar solo uno. Necesitamos actualizar $ font-size-base para usar unidades rem. Haremos esto ahora.

Abra el archivo _variables.scss ubicado en la carpeta resources/assets/sass/ y realice los siguientes ajustes:

// Body 
$body-bg: #f5f8fa;

// Borders 
$laravel-border-color: darken($body-bg, 10%);
$list-group-border: $laravel-border-color;
$navbar-default-border: $laravel-border-color;
$panel-default-border: $laravel-border-color;
$panel-inner-border: $laravel-border-color;

// Brands 
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;

// Typography 
//$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; <-- Remove 
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 1rem; // <-- Important Change 
$line-height-base: 1.6;
$text-color: #636b6f;

// Navbar 
$navbar-default-bg: #fff;

// Buttons 
$btn-default-color: $text-color;

// Inputs 
$input-border: lighten($text-color, 40%);
$input-border-focus: lighten($brand-primary, 25%);
$input-color-placeholder: lighten($text-color, 30%);

// Panels 
$panel-default-heading-bg: #fff;

Dos cambios en la sección Tipografía

Icon-font-path ya no es relevante ya que Bootstrap ya no se envía con Glyphicons. Hay sugerencias sobre los documentos de Bootstrap que lo guiarán a este respecto. Por ahora no tenemos que preocuparnos por la ruta de la fuente para que podamos eliminarla.

¡Éxito!

Esta configuración completa los pasos necesarios para ejecutar Bootstrap 4 con Laravel 5.5. Cuando trabaje con Frontend en Laravel, puede compilar su SASS y JS con los siguientes comandos de NPM:

$ npm run dev

Alternativamente, podrías ejecutar al observador:

$ npm run watch

Espero que esta publicación te haya ayudado a seguir tu camino desarrollando tu próxima gran idea con Laravel y Bootstrap 4. No olvides compartir para ayudar a otros o colocarte en contacto conmigo a través de mis redes sociales al final de la pagina y cuéntame que piensas de la publicación.