Dynamic Imports causes an empty css compilation

[thecyrilcril]

Project Dependencies

+-- @vue/compiler-sfc@3.0.0
+-- axios@0.19.2
+-- browser-sync@2.26.12
+-- browser-sync-webpack-plugin@2.2.2
+-- cross-env@7.0.2
+-- laravel-mix@5.0.5
+-- laravel-mix-vue3@0.7.0
+-- lodash@4.17.20
+-- postcss-import@12.0.1
+-- resolve-url-loader@2.3.2
+-- sass@1.26.11
+-- sass-loader@8.0.2
+-- tailwindcss@1.8.10
+-- vue@3.0.0
+-- vue-loader@16.0.0-beta.8
`-- vue-router@4.0.0-beta.11

router.js

import { createWebHistory, createRouter } from 'vue-router';

const Home = () =>
  import(
    /* webpackChunkName: "home" */
    /* webpackPrefetch: true */
    './views/Home.vue'
  );

const Accounts = () =>
  import(
    /* webpackChunkName: "accounts" */
    /* webpackPrefetch: true */
    './views/Accounts.vue'
  );

const Savings = () =>
  import(
    /* webpackChunkName: "savings" */
    /* webpackPrefetch: true */
    './views/Savings.vue'
  );

const Loans = () =>
  import(
    /* webpackChunkName: "loans" */
    /* webpackPrefetch: true */
    './views/Loans.vue'
  );

const Withdrawals = () =>
  import(
    /* webpackChunkName: "withdrawals" */
    /* webpackPrefetch: true */
    './views/Withdrawals.vue'
  );

const Maketers = () =>
  import(
    /* webpackChunkName: "maketers" */
    /* webpackPrefetch: true */
    './views/Maketers.vue'
  );

const Finances = () =>
  import(
    /* webpackChunkName: "finances" */
    /* webpackPrefetch: true */
    './views/Finances.vue'
  );

const Tithe = () =>
  import(
    /* webpackChunkName: "tithe" */
    /* webpackPrefetch: true */
    './views/Tithe.vue'
  );

const Settings = () =>
  import(
    /* webpackChunkName: "settings" */
    /* webpackPrefetch: true */
    './views/Settings.vue'
  );

  const NotFound = () =>
    import(
      /* webpackChunkName: "NotFound" */
      /* webpackPrefetch: true */
      './views/NotFound.vue'
    );

const routes = [
  {
    path: '/:catchAll(.*)',
    component: NotFound
  },
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/accounts',
    name: 'accounts',
    component: Accounts
  },
  {
    path: '/savings',
    name: 'savings',
    component: Savings
  },
  {
    path: '/loans',
    name: 'loans',
    component: Loans
  },
  {
    path: '/withdrawals',
    name: 'withdrawals',
    component: Withdrawals
  },
  {
    path: '/maketers',
    name: 'maketers',
    component: Maketers
  },
  {
    path: '/finances',
    name: 'finances',
    component: Finances
  },
  {
    path: '/tithe',
    name: 'tithe',
    component: Tithe
  },
  {
    path: '/settings',
    name: 'settings',
    component: Settings
  }
];

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({
    y: 0
  }),
  linkActiveClass: '',
  routes,
});

export default router;

Compilation result:

 DONE  Compiled successfully in 342ms                                                                                                               4:51:21 AM

         Asset      Size        Chunks             Chunk Names
  /css/app.css   0 bytes  /js/app, mix  [emitted]  /js/app, mix
    /js/app.js  1.17 MiB       /js/app  [emitted]  /js/app
   NotFound.js  11.4 KiB      NotFound  [emitted]  NotFound
   accounts.js  11.4 KiB      accounts  [emitted]  accounts
   finances.js  11.4 KiB      finances  [emitted]  finances
       home.js  14.9 KiB          home  [emitted]  home
      loans.js  11.2 KiB         loans  [emitted]  loans
   maketers.js  11.4 KiB      maketers  [emitted]  maketers
    savings.js  11.3 KiB       savings  [emitted]  savings
   settings.js  11.4 KiB      settings  [emitted]  settings
      tithe.js  11.2 KiB         tithe  [emitted]  tithe
withdrawals.js  11.5 KiB   withdrawals  [emitted]  withdrawals
[Browsersync] Reloading Browsers... (buffered 8 events)

[KABBOUCHI]

are you using styles in vue components?

[thecyrilcril]

@KABBOUCHI Yes, all my .vue files have style in them, though they are all empty at the moment

...

<style lang="css" scoped>
</style>

[KABBOUCHI]

Its a known issue with Laravel Mix when using dynamic imports where you cannot use styles within Vue files due to a Webpack limitation

It may be fixed in the next laravel-mix release ( Laravel Mix v6 + Webpack v5)

[thecyrilcril]

Its a known issue with Laravel Mix when using dynamic imports where you cannot use styles within Vue files due to a Webpack limitation

It may be fixed in the next laravel-mix release ( Laravel Mix v6 + Webpack v5)

@KABBOUCHI I have removed all the styles but I still get an empty css file