4

I have a Laravel project using Laravel Mix, Vue.js and Sass.
The following is the content of the webpack.mix.js file in the project:

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

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

This Mix file is properly compiling all the CSS and JS assets for me when I import all of my Vue components into a master Vue component called App as follows:

// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';

// Pages
import Home from './pages/Home';
// And many more here...

export default {
    components: {
        SiteFooter,
        SiteHeader,

        // Pages
        Home,
        // etc...
    }

However, as I started to create a lot of components. app.js started to get too big, so then I switched to loading the components in App asynchronously as follows:

// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';

export default {
    components: {
        SiteFooter,
        SiteHeader,

        // Pages
        Home: () => import('./pages/Home'),
        // And many more here...

This perfectly achieved the goal of reducing the size of app.js and breaking the components up into separate files, which is great, but as soon as I did this, the Sass stopped compiling into app.css and vendor.css files, and I had no styles on the site.

I played around for a bit and realized that if I removed the extract(['vue']) line from webpack.mix.js, then the Sass would correctly compile again and the styles would display correctly, but then app.js would increase in size by about 330k because of the inclusion of the Vue code.

What I'm wondering is: Why does having the extract(['vue']) method call in the Mix file along with using asynchronous components in Vue cause the Sass to not be compiled, and more importantly, is there a way to pull the Vue code out into a separate vendor.js file as well as get the Sass to properly compile when Vue components are asynchronously loaded? Thank you.

HartleySan
  • 7,404
  • 14
  • 66
  • 119
  • This is apparently related to the following SO post I made later on, which is linked to a GitHub issue that a lot of people have complained about: https://stackoverflow.com/questions/62288513/is-there-a-way-to-watch-two-laravel-mix-webpack-config-files-at-the-same-time-fo – HartleySan Jul 25 '20 at 11:39
  • 1
    https://github.com/JeffreyWay/laravel-mix/issues/1879 - this is a known issue. – Goper Leo Zosa Dec 26 '20 at 09:25

0 Answers0