laravel 5.6 mix webpack css bottstrap

en package.json tenemos definidas las dependencias de node.js para instalarlas usamos su manejador de paquetes npm

npm install

esto nos creara una nueva carpeta node_modules

el archivo webpack.mix.js
es donde iran todas las tareas programadas

por default ya vienen un par

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

para compilar app.js y que el resultado se grabe en public/js
y oara compilar app.scss y copiar el resultado en public/css

entonces , aprovechamos y pegamos en app.scss el codigo de css que teniamos en el layout

.active {
  text-decoration: none;
  color: green;
}
.error {
  font-size: 12px;
  color: red;
}

y luego corremos

npm run dev


ahora solo falta agregarlo en el head del layout

<link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">

ahora pasemos nuestro codigo a bootstrap 4 (es la version que viene)

para facilitarnos la tarea instalamos un package de sublime

ctrl+shift+p

y luego buscamos bootstrap 4 snippets

luego de que se instale vamos

a preferences->settings
y agregamos la sgt linea

"auto_complete_triggers": [{"selector": "text.html", "characters": "b4"}]


ahora volvamos al layout, vamos a hacerlo desde cero

y tipeamos

b4template   (seleccionar b4:template:navbars)

esto nos creara toda la estructura vacia con distintos navbars, dejar el que necesitemos, y volver a escribir los links verdaderos.



tip: para que se compile automaticamente los cambios en app.scss
en la consola
npm run watch

para optimizar los archivos generados de css y js

ejecutar

npm run dev


se puede tambien unir varios archivos de estilos
por ejemplo si tengo un archivo signin.css

en resources/assets

creo una carpeta (por convencion) llamada components
y lo guardo ahi con la extension scss

luego en app.scss lo importo

@import 'components/signin'

el resultado ira a un unico archivo app.css



para agregar bootstrap.js

vamos al archivo webpack.mix.js
y agregamos la tarea

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .js('node_modules/bootstrap/dist/js/bootstrap.js', 'public/js');

esto nos creara un archivo llamado bootstrap dentro de public/js/


como bootstrap necesita de jquery si en package.json no estuviera

lo instalamos como dependencia

npm install jquery --save

(--save lo registra en package.json)

luego en webpack.mix.js lo agregamos como tarea para que compile y llevarlo a nuestra carpeta public/js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .js('node_modules/jquery/dist/jquery.js', 'public/js')
   .js('node_modules/bootstrap/dist/js/bootstrap.js', 'public/js');

compilarlo con npm run dev

y en el layout antes de la etiqueta de fin del body

<script type="text/javascript" src="{{ asset('/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ asset('/js/bootstrap.js') }}"></script>