I have three folders: base, pc and mobile. I always connect index.scss from the first folder through the css section in nuxt.config.js.
To determine the type of device, I use @nuxtjs/device. And now I want to asynchronously import styles for mobile devices and for PCs.

I try to run this code in the default template, but a parsing error occurs.

mounted () {
  import('~/assets/scss/'   (this.$device.isMobile ? 'mobile' : 'pc')   '/index.scss')
}

Update 1:

I also tried another code like this:

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')
  }
})

And I got such errors:

Even in VS Code hints there are no .scss files:

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:

CodePudding user response：

async mounted () {
  if (process.client) {
    if (this.$device.isMobile)
      await import('~/assets/scss/mobile/index.scss')
    else
      await import('~/assets/scss/pc/index.scss')
  }
}

should do the trick as explained in my answer here.