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>
在還沒看到更好的解法之前,自己是用這種方式解決。