aCastor's avatar

Laravel Mix (Vue + Stylus). Blank page on npm run watch

I start up a new Laravel + Vue + Stylus project, and i can't normally work because i always got blank page when adding/editing some styles on .styl files. And when i edit my .vue templates it come back to normal state.

My main.js file:

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import { routes } from './routes/index';
    import App from './App.vue';
    
    Vue.use(VueRouter);
    
    const router =  new VueRouter({
        mode: 'history',
        routes
    });
    
    new Vue({
        el: '#app',
        router,
        render: h => h(App)
    });

My webpack.mix.js file:

    mix.js('resources/assets/js/main.js', 'public/js')
          .stylus('resources/assets/stylus/app.styl', 'public/css')
          .browserSync('localhost:8000');

Some strange thing that i noticed is that when i save my .styl file i got main.js like prod version(not compiled) and in console has an error:

    Uncaught SyntaxError: Unexpected token import

If i save this file again i got normal compiled main.js file, but it doesn't render my App

And finally when i edit .vue templates all works perfect.

0 likes
0 replies

Please or to participate in this conversation.