JorgeAlberto's avatar

How to configure laravel mix to work with asynchronous components?

Hi.

I have a Laravel project and I am using Vuetify.

this my config to plugin vuetify

import Vue from "vue";
import Vuetify from "vuetify";
// import "@mdi/font/css/materialdesignicons.css";
import "material-design-icons-iconfont/dist/material-design-icons.css";
import es from "vuetify/lib/locale/es.js";

Vue.use(Vuetify);

const opts = {
  theme: {
    options: {
      customProperties: true
    },

    themes: {
      light: {
        primary: "#283e60", // azul
        secondary: "#606363", // gris
        accent: "#82B1FF",
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#dc992d" // naranja
      }
    }
  },
  lang: {
    locales: { es },
    current: "es"
  },
  icons: {
    iconfont: "md" || "mdi"
  }
};

export default new Vuetify(opts);

This is the configuration of laravel mix

mix
  .js("resources/js/login/app.js", "public/js/login")
  .js("resources/js/dashboard/app.js", "public/js/dashboard")
  .sass("resources/sass/login.scss", "public/css/login")
  .sass("resources/sass/dashboard.scss", "public/css/dashboard");

this is what i get

 DONE  Compiled successfully in 11863ms           

                               Asset      Size                            
/css/dashboard/dashboard.css          0 bytes  
/css/login/login.css                               0 bytes  
/js/dashboard/app.js                        2.3 MiB    
/js/login/app.js                                 2.29 MiB
0.js                                                     63.6 KiB 
1.js                                                     13.9 KiB
2.js                                                     12.7 KiB                                
 

My question is:

How can I configure Laravel Mix to interpret my SASS files even if I have asynchronous compotent?

0 likes
2 replies
fylzero's avatar

@jorgealberto Not exactly a direct answer but you could consider just putting your scss in your Vue files. If you Google a bit, you only have to pull in a couple packages for that to work.

JorgeAlberto's avatar

I think my page performance will suffer. But it is a very good option.

Please or to participate in this conversation.