Compilar con Laravel Mix y Bootstrap 4

Para compilar y usar Laravel Mix en una instalación limpia debemos seguir estos pasos.

composer create-project laravel/laravel

php artisan preset none

Hacemos un full reset de npm por si acaso

rm -rf node_modules

rm package-lock.json yarn.lock

npm cache clear --force

Instalamos. Al indicar npm install bootstrap nos instalará la última versión. Hay que hacerlo después del instalar el popper ya que bootstrap necesita el popper.

npm install
npm install popper.js --save
npm install bootstrap

Asegurarse de cambiar el fichero resources/assets/sass/app.scss con este contenido

// Fonts
@import url(',700');

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';

Asegurarse de cambiar el fichero resources/assets/js/bootstrap.js con este contenido

window._ = require('lodash');
window.Popper = require('popper.js').default;

* 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.

try {
   window.$ = window.jQuery = require('jquery');

} catch (e) {}

* 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:');

* 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: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });


npm run dev

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.