Async Vue component breaks sass compilation

why you are using two mix try chaining it to one like

// webpack.mix.js
const mix = require('laravel-mix');

require('laravel-mix-tailwind');

mix
    .js('resources/js/bootstrap.js', 'public/js')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/tailwind.scss', 'public/css')
    .tailwind();

If this not solve your problem. Show us your app.js file.

@ajithlal Thank you for your answer.

The problem is not in my scripts. After three hours I identified what causes the problem of not generating css. Here's an example.

Create new Laravel project, install npm and Vue Library.

laravel new test_project

npm install

npm install vue --save-dev

Create AsyncComponent.vue file.

// resources/js/AsyncComponent.vue
<template>
    <div>
        Async Component.
    </div>
</template>

<script>
    export default {
        name: 'AsyncComponent',
    }
</script>

Update app.js file.

// resources/js/app.js
require('./bootstrap');

import Vue from 'vue';

Vue.component('async-component', function() { import('./AsyncComponent') });

Update app.scss file.

// resources/sass/app.scss
h1 {
    display: block;
}

Start npm run dev

npm run dev

Everything is fine in this step.

// public/css/app.css has 26 bytes
// public/js/app.js has 921 KiB
// public/0.js (async component) has 10.3 KiB

Now try create separate js file - another.js

// resources/js/another.js

// some content

Add this file to webpack.min.js

// webpack.min.js
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/another.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Start npm run dev

npm run dev

Everything is fine in this step (public/css/app.css has 26 bytes)

But, when you try toggle files in webpack.min.js (first is another.js and second app.js with async component), app.css file in public folder is empty (0 bytes).

// webpack.min.js
mix.js('resources/js/another.js', 'public/js') // another.js as first
    .js('resources/js/app.js', 'public/js') // app.js as second
    .sass('resources/sass/app.scss', 'public/css');

Start npm run dev

npm run dev

Now generates css file in public/css/app.css is empty. Why?

This mystery of generating empty css files is somehow related to importing an asynchronous component in app.js. Once I comment line with async component import:

// resources/js/app.js
require('./bootstrap');

import Vue from 'vue';

// Vue.component('async-component', function() { import('./AsyncComponent') });

the css file is generated correctly.

Importing a single js file in the webpack.min.js file works fine, but I want to generate at least two javascript files and load them separately in html (app.js and bootstrap.js), but I get a css error.

Why does this error occur and how to work around it?

@inyansuta rewrite your component initializing from

Vue.component('async-component', function() { import('./AsyncComponent') });

to

Vue.component('async-component', require('./AsyncComponent.vue'));

and compile again.

@ajithlal Of course, your code works, but it does not generate the asynchronous component.

@inyansuta i'm not sure but, Just remove the name from the export defaut section on your script and compile like below.

<template>
    <div>
        Async Component.
    </div>
</template>

<script>
    export default {
   
    }
</script>