Sep 5, 2017
0
Level 1
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.
Please or to participate in this conversation.