Home

I have my main layout using layouts/default.vue

<template lang="pug">
  #app
    Top
    nuxt
    Bottom
    Login
</template>

<script>
import Top from '~/components/layout/Top.vue'
import Bottom from '~/components/layout/Bottom.vue'
import Login from '~/components/Login.vue'
export default {
  components: { Top, Bottom, Login },
}
</script>

<style lang="stylus">
@import '../assets/stylus/main'
</style>

and then I have an admin backend using layouts/control.vue

<template lang="pug">
  #app
    Top
    nuxt
</template>

<script>
import Top from '~/components/control/layout/Top.vue'
export default {
  components: { Top },
  middleware: 'admin',
  head () {
    return {
      link: [
        { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css' },
      ],
    }
  }
}
</script>

<style lang="sass">
@import assets/sass/bulma.sass
</style>

I want to keep two separate CSS frameworks for both layouts, the main one I have my own I’m buliding and hten for the admin I want to use bulma and some bulma plugins (hence bulma.sass)

My issue is if I go from one layout to the other via a router-link this breaks things, the css mixes, but if I then refresh the page on either layout its fine.

Is this a bug? or is there a better approach for layout-specific CSS includes?