Mix v4 outputs blank app.css file

I have a fresh installation of Laravel 5.8

node v10.15.3
npm v6.10.1

I have this webpack.mix.js config

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

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

if (mix.inProduction()) {
    mix.version();
}

mix.disableNotifications();

this normally works on Laravel Mix v2.*

the js files are being compiled normally but the app.css file is blank

skeith22

6 years ago

Level 22

it seems that .extract(['vue']) is causing app.css output to be blank. but not sure.

skeith22

6 years ago

Level 22

just retested again with

node v12.7.0
npm v6.10.2

package.json file

"devDependencies": {
    "axios": "^0.19",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "bootstrap": "^4.1.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-router": "^3.0.7",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.1"
}

app.js file

import App from './views/layouts/App';
import router from './router';

// Layouts
Vue.component('navbar', require('./views/layouts/Navbar.vue').default);
Vue.component('sidebar', require('./views/layouts/Sidebar.vue').default);

const app = new Vue({
    el: '#app',
    components: { app: App },
    router
});

router.js file

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Home = () => import('./views/Home');

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home }
  ]
});

export default router;

webpack.mix.js

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

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

if (mix.inProduction()) {
    mix.version();
}

mix.disableNotifications();

SAME RESULTS blank app.css file

@JeffreyWay