Eliminando Bootstrap en Laravel 7

Si amas Laravel y requieres iniciar un proyecto rápidamente con Laravel Mix o el Scaffolding de Authentication, pero deseas utilizar otra alternativa de librería CSS, estos son los pasos que requieres seguir para desinstalar Bootstrap de tu proyecto y abrir las puertas a otra alternativa.

Eliminando Bootstrap en Laravel 7

Todo desarrollador conoce la popularidad de Bootstrap. Sin lugar a dudas Bootstrap abrió las puertas al nuevo mundo de los frameworks CSS que existen hoy en día. Bulma, UIkit, Foundation, Tailwind, etc. Para muchos Bootstrap ha sido la única alternativa conocida, en lo personal, este ha sido una de las muchas opciones utilizadas.

Si amas Laravel y requieres iniciar un proyecto rápidamente con Laravel Mix o el Scaffolding de Authentication, pero deseas utilizar otra alternativa de librería CSS, estos son los pasos que requieres seguir para desinstalar Bootstrap de tu proyecto y abrir las puertas a otra alternativa.

Mi instalación base parte de una instalación base de Laravel que incluye Authentication con el siguiente comando (Más información en Authentication Quickstart):

user@linux:/path/to/laravel/install$ laravel new app --auth

Este comandos es equivalente a instalar Laravel de la siguiente forma (Más información en Frontend Scaffolding):

user@linux:/path/to/laravel/install$ laravel new app
user@linux:/path/to/laravel/install$ cd app
user@linux:/path/to/laravel/install/app$ composer require laravel/ui
user@linux:/path/to/laravel/install/app$ php artisan ui vue --auth

Eliminando la Dependencia

Para iniciar con la des-instalación procedemos a remover Bootstrap como parte de nuestras dependencias:

  1. Si existe, procedemos a eliminar el folder 'node_modules'.
  2. Eliminamos la dependencia a través de npm (O modificamos el archivo package.json y removemos la dependencia):
user@linux:/path/to/laravel/install/app$ npm remove bootstrap
  1. Comentamos o eliminamos la dependencia de Javascript colocada para publicar jQuery para Bootstrap en el archivo laravel-path/resources/js/bootstrap.js.
...
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}
...
  1. Eliminamos las dependencias SASS generadas por Laravel Mix. Esto podemos hacerlo de dos formas:
    4.1. Comentando o eliminando la entrada de Laravel Mix en el archivo /laravel-path/webpack.mix.js (Si no necesitamos SASS en nuestra aplicación):
mix.js('resources/js/app.js', 'public/js')
//    .sass('resources/sass/app.scss', 'public/css');

4.2. Comentando o eliminando la entrada de Bootstrap en el archivo SASS (En caso de que sí requiramos SASS en nuestra aplicación):

// Bootstrap
// @import '~bootstrap/scss/bootstrap';
  1. Por último, actualizamos nuestras dependencias y compilamos nuestro archivo final:
user@linux:/path/to/laravel/install/app$ npm install
user@linux:/path/to/laravel/install/app$ npm run dev

Si todo sale correctamente tu instalación ya no dispone de bootstrap como dependencia CSS.

Happy Coding!