SOLVED: Laravel Mix Dynamic Import with Extract enabled that causes 0 bytes CSS

README.md

Motivation:

1. I need Dynamic Import needed for lazyload Inertia Pages
2. I also need Mix.extract() function enabled on webpack.mix.js in order to separate bundle based on vendor
3. If we doing both without "mini-css-extract-plugin" app.css will be build with 0 bytes.

After tinkering for 2 hours, I find a way how to integrate "mini-css-extract-plugin" to laravel mix. Since this is the root cause of the "0 bytes of css" problem.

Info: My folder structure for resources

├── css
│   └── app.css
├── inertia
│   ├── Components
│   ├── Layouts
│   └── Pages
│       ├── Index.vue
│       └── Login.vue
├── js
│   ├── app.js
│   └── bootstrap.js
├── lang
│   └── en
│       ├── auth.php
│       ├── pagination.php
│       ├── passwords.php
│       └── validation.php
└── views
    └── app.blade.php

app.css

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */

@import 'tailwindcss/utilities';

app.js

// import './bootstrap'

import(/* webpackChunkName: "css/app" */ '../css/app.css')
import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h =>
    h(InertiaApp, {
      props: {
        initialPage: JSON.parse(app.dataset.page),
        resolveComponent: name =>
          import(
            /* webpackChunkName: "js/inertia-pages/" */ `../inertia/Pages/${name}`
          ).then(module => module.default)
      }
    })
}).$mount(app)

webpack.mix.js

const mix = require('laravel-mix')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .js('resources/js/app.js', 'public/js')
  .webpackConfig({
    plugins: [new MiniCssExtractPlugin()],
    module: {
      rules: [
        {
          test: /\.css$/,
          loaders: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader'
          ]
        }
      ]
    }
  })
  .options({
    postCss: [
      require('postcss-import'),
      require('postcss-nested'),
      require('postcss-preset-env'),
      require('tailwindcss'),
      require('autoprefixer')
    ]
  })
  .sourceMaps()
  .extract()
  .version()