'Laravel Mix & Vue: How do you get multiple CSS outputs?

I am building 2 bundles because they are separate Vue apps in different sections of the site. I am choosing in the mix options to have the styles extracted from the VUE file into a CSS file but it is only outputting 1 css file, vue-styles.css, and it seems to only have styles from my app-admin-support.js app since it's listed below the other one. Is it possible to have multiple CSS files created? This is what my mix file looks like : 

mix .js('resources/assets/js/app.js', 'dist/js')
    .js('resources/assets/js/app-admin-support.js', 'dist/js')
    .extract(['vue', 'vuetify'])

mix.options({
  extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
  purifyCss: true // Remove unused CSS selectors.
});
laravelvue.jsvuetify.jslaravel-mix


Solution 1:[1]

I had the same issue some days ago, this may help

Simply change your webpack.mix.js into this:

mix .js('resources/assets/js/app.js', 'dist/js')
    .js('resources/assets/js/app-admin-support.js', 'dist/js')
    .extract(['vue', 'vuetify'])
    // If you are using vuetifyjs-mix-extension you can do this:
    .vuetify("", { extract: "[name].css" })

mix.options({
  extractVueStyles: true,
  purifyCss: true,
});

This is mine, and it can helps: enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kingbeencent

Related Questions