I manage three main folders on my project: base, pc, and mobile. The index.scss file from the base folder is always connected through the css section in nuxt.config.js
.
To distinguish between different device types, I utilize the @nuxtjs/device
module. Now, I am looking to load styles asynchronously for both mobile devices and PCs.
When attempting to implement this code in the default template, I encounter a parsing error.
mounted () {
import('~/assets/scss/' + (this.$device.isMobile ? 'mobile' : 'pc') + '/index.scss')
}
Update 1:
Another approach I tried involves the following code snippet:
import Vue from 'vue'
import { Item as MenuItem } from '../interfaces/base/menu'
export default Vue.extend({
name: 'DefaultLayout',
data: (): any => ({
menu: [] as Array<MenuItem>
}),
mounted () {
if (this.$device.isMobile)
import('../assets/scss/mobile/index.scss')
else
import('../assets/scss/pc/index.scss')
}
})
Unfortunately, this resulted in errors such as:
No .scss files are shown even in VS Code suggestions:
Update 2:
async mounted () {
if (process.client) {
if (this.$device.isMobile)
await import('~/assets/scss/mobile/index.scss')
else
await import('~/assets/scss/pc/index.scss')
}
}
Console errors persist despite these updates: