4

Configuración Laravel Mix y Bootstrap 4 Beta.2

Quiero compartir esto, porque me llevo un rato solucionarlo, siguiendo el esquema de la clase 36 de Laravel Mix que usaba Bootstrap 4 Alpha y tether; Actualmente la versión de Bootstrap es la 4.0.0-beta.2 ya no usa tether sino Popper.js

Mi ambiente de desarrollo es con Windows 7, Xampp y Lravael 5.5.14, esto lo menciono porque los usuarios de windows tenemos que tener en cuenta unos detalles:

  • Instala la ultima versión LTS de Node.js, (a veces npm no es compatible con la versión mas nueva de node.js)

  • Revisa las versiones de Node.js y NPM
    $ node -v
    $ npm -v

  • Realizar instalacion y compilar
    $npm install
    $npm run dev

Si al compilar con run dev te genera un error: “cross-env” no se reconoce como un comando interno o externo. (este error al parecer nos aparece a los usuarios de windows) hay que borrar la carpeta node_modules/ de nuestro proyecto y volver a generar el npm install:

$ rm -rf node_modules/
$ npm install
$ npm run dev

Si despues de esto la compilacion es correcta ahora si vamos a configurar Bootstrap 4:

$ npm install [email protected] --save-dev
$ npm install popper.js --save-dev

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

Volver a hacer el install:
$ npm install

Después en nuestro proyecto , actualizar el archivo resources/assets/js/bootstrap.js

window._ = require('lodash');
import Popper from 'popper.js/dist/umd/popper.js';/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 * Include the Popper.js library, since Boostrap 4 requires it
 */try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {
}

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */window.Vue = require('vue');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */// import Echo from 'laravel-echo'// window.Pusher = require('pusher-js');// window.Echo = new Echo({//     broadcaster: 'pusher',//     key: 'your-pusher-key'// });

Actualizar el archivo resources/assets/sass/app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");// Variables
@import "variables";// Bootstrap
@import "~bootstrap/scss/bootstrap";

Por ultimo volver a compilar:

$ npm run dev 

Si no hay ninguna error estamos listos para usar Bootstrap 4 Beta en nuestro proyecto.

Si obtienes algun errror es importante buscar cual es el error exacto, ya que dependiendo las versiones de las herramientas podriamos tener distintos tipos de errores.

Espero este aporte les ahorre un poco de tiempo, saludos.

Atte. @ljbautista

Escribe tu comentario
+ 2