¿Cómo tener archivos css y js para plantillas diferentes una para el Frontend y otra para el panel de administración?

Tengo dos plantillas una para el Frontend y otra para la administración que utilizan diferentes tipos de archivos js y css. A la hora de minificar los archivos css y js de ambas plantillas se distorsiona el diseño. Entonces me gustaría saber como puedo lograr minificar estos archivos para que cada uno tenga los archivos css y js que le corresponden. 

LUIS ANTONIO PARRADO (2756 xp)jun 24, 2020

Si está usando laravel-mix con webpack puede organizar sus archivos dentro de `resources/js` (para javascript) usando dos archivos distintos desde donde llama las demás dependencias (por ejemplo `app.js` y `admin.js` ). Lo mismo para los `css` o `sass` los puede organizar dentro de `resources/sass` en dos archivos distintos (por ejemplo `app.scss` y `admin.scss`)  desde cada uno `@import`a los parciales que necesite para cada plantilla.
Finalmente edita el archivo `webpack.mix.js` añadiendo las rutas para los archivos compilados, en este caso por ejemplo sería
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/admin.js', 'public/js')
   .sass('resources/sass/admin.scss', 'public/css') 

Y listo, basta correr `npm run prod` para compilar y minificar y simplemente en la plantilla admin enlaza `admin.css` y `admin.js` y en la otra enlaza `app.css` y `app.js`

Mario Damian (58 xp)jun 24, 2020

Perfecto muchas gracias. Pensé que no se podían tener dos archivos js minificados con laravel-mix. Muy agradecido.