nuxtjsのホットリロード時のsassコンパイル

main.cssやnormalize.cssのように固定で必ず最初に読み込ませたいsassファイルのコンパイルで困っています。

nuxt-device-detectを使用して、pc/spの表示切り替えを行っているため
vueファイルにstyle記載やimportを行うとpc表示の時にもspのcssが読み込まれてしまうため、cssはレイアウトのheadで読み込ませているのですが、nuxtjsでホットリロード時にassets配下のsassファイルをstatic配下にcssコンパイルする方法がわかりません。

nuxtjs
　L assets
　|　L sass
　|　 　L main.sass
　L 略
　L static
　 　L css
　　 　L main.css（main.sassがコンパイルされたもの）

index.vue

<template>
  <section class="main">
    <div v-if="$device.isMobile">
      <SpTop />
    </div>
    <div v-else>
      <PcTop />
    </div>
  </section>
</template>

<script>
import PcTop from '~/components/pc/Top.vue';
import SpTop from '~/components/sp/Top.vue';

export default {
    layout: (ctx) => ctx.isMobile ? 'mobile' : 'default',
    components: {
        PcTop,
        SpTop
    },

  head () {
    return {
      title: "タイトル",
    }
  },

};
</script>

pcLayout.vue

<template>
  <div>
    <CommonHeader />
    <nuxt/>
    <CommonFooter />
  </div>

</template>

<script>
    import CommonHeader from '../components/pc/common/Header.vue';
    import CommonFooter from '../components/pc/common/Footer.vue';

    export default {
        name: 'App',
        components: {
            CommonHeader,
            CommonFooter
        },
        head () {
            return {
                title: "タイトル",
                link: [
                    {rel: "stylesheet", href: '/css/normalize.css'},
                    {rel: "stylesheet", href: '/css/master.css'}
                ]
            }
        },
    };
</script>