CSS Breaking

[looterz]

Hello. I have a rather complex webpack setup going, and this is my first time working with a vue project. I have webpack, vue-loader, and vue-router setup, and I also have a sass setup alongside it managed by gulp, that compiles my sass and minifies it into a bundled css that is then placed into the distribution folder alongside the final vue app.

The problem I seem to be having when using vue-router, is that the styling seems to break. When using the following default Vue setup, the styling works as expected

new Vue({
  el: 'body',
  component: App
})

When using a vue-router setup, the styling for text specifically breaks, although layouts and colors seemed to be preserved

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

var router = new VueRouter()

router.map({
  '/': {
    component: Home
  }
})

router.start(App, 'body')

The frontend css framework I use is bulma, the only thing that seems to change is all text font properties are reset, they are no longer

$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace

Other elements I have not worked with yet may also be broken. I've also had trouble transitioning to a vue-loader sass setup, problems importing bulma into components to be more specific (lots of errors).

[looterz]

Aha, figured it out finally. Since I was using body, router.Start removes the element it attaches to unless told not to do so, which broke the styling.