Instalación limpia de Tabler.io

Tenemos que tener una instalación limpia Laravel



- Nos colocamos en la raíz y tenemos que instalar todas las dependencias básicas que trae Laravel con:
npm install



- Ahora ejecutamos la instalación específica de tabler
npm install @tabler/core



- Tocamos el webpack.mix.js dejandolo de la siguiente manera, ya que en "resources/scss" vamos a poner nuestras personalizaciones de tabler propias

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */


mix.js('resources/js/app.js', 'public/js').vue();
mix.sass('resources/scss/app.scss', 'public/css');

if(mix.inProduction()) {
    mix.version();
}



- Hay que ajustar el fichero resources/js/app.js
require('./bootstrap');

window.Vue = require('vue').default;

// Cargamos el tabler
require('@tabler/core/src/js/tabler.js');
//require('selectize');

// Si queremos cargar y usar los iconos de fontawesome
//require('@fortawesome/fontawesome-free/js/all.js');

// Esto es porque usamos la validación de bootstrap para que nos la haga antes del submit
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()


- Ajustamos el fichero resources/scss/app.scss ya que le hemos dicho en el webpackmix que pille este fichero
// Si queremos usar una font-family específica hay que ponerla primero para poder indicarla en el variables

// Primero hay que incluir las variables para que sobreescriban los que viene después
// Este fichero hay que crearlo para personalizar las variables por defecto del bootstrap/tabler
// Nosotros lo creamos como "_variables.scss" con guión y lo detecta
@import 'variables';


// Importamos el tabler css completo
@import '@tabler/core/src/scss/tabler';


- Hay que instalar "vue" si lo hemos incluído en el fichero de app.js por si queremos utilizar algo "a pelo" del vue (mostrar la contraseña con el iconito en el formulario de login)
npm install vue

- En la nueva versión de tabler hay que instalar varios módulos aparte para que no de fallo el "npm run"
npm install autosize
npm install imask

- Para que no falle la nueva versión en el tema de la fuente Inter, hay que ajustar el app.scss
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import 'variables';
@import '@tabler/core/src/scss/tabler';

y el  y el _variables.scss
$font-google: "'Open Sans', sans-serif";

- Ahora ya podemos lanzar el compilador de estilos y scripts (según corresponda dev, watch o production)
npm run watch
ó
npm run dev
ó
npm run production


- En nuestras vistas (main o donde corresponda) tenemos que enlazar estos ficheros generados con el Laravel Mix
<link rel="stylesheet" href="{{ mix('/css/app.css') }}" />
<script type="text/javascript" src="{{ mix('/js/app.js') }}"></script>