Nuxt layout import 不同的 css

突然遇到了一個比較特殊的狀況，想要將兩包 vue 檔案整合進一個 nuxt 專案，各個 vue 檔案已經有了 css 樣式，如果全部都整合進 global css 內會有樣式互相覆蓋的問題。
查了一下 github 上有相關的討論CSS from multiple layouts is being included on individual pages #3877

解決方法

稍微看了一下，整串的討論解法不外乎都是 body 加上 class 在使用 css scoped 分別掛載樣式，或是 layout link 不同的 css 檔案，我個人的話選擇了以下方式。

前置作業

我自己先整理過兩份的 css 找出共同的樣式，掛 global

export default {
  css: [
    '@/assets/scss/main.scss'
  ],
}

拆分 layout 不同的樣式

layout-a:

<style lang="scss" scoped>
.layout-a{
  &::v-deep {
    @import '~assets/scss/layout-a.scss';
  }
}
</style>

layout-b:

<style lang="scss" scoped>
.layout-b{
  &::v-deep {
    @import '~assets/scss/layout-b.scss';
  }
}
</style>

在還沒看到更好的解法之前，自己是用這種方式解決。