1

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

Screenshot with an error

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: Update 1 errors

Even in VS Code hints there are no .scss files: 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: Console errors

Владислав Сердобинцев
  • 23
  • 7
  • Before trying to make it with in an async dynamic way, you should try to make it work in a static hardcoded one. The issue here is probably unrelated to the fact that it's dynamic + async. Also, why would you like to have 3 CSS files? Media queries are aimed towards handling all of those viewport concerns. – kissu Apr 04 '22 at 16:48
  • I don't want to use media queries because I have to load extra styles. Why download styles for PC if you visit the page from your phone? – Владислав Сердобинцев Apr 04 '22 at 16:56
  • But it seems to me that there can be no mistake. I previously developed this project on nuxt3 and had to port it to nuxt2 due to the fact that the project cannot be started in production mode. – Владислав Сердобинцев Apr 04 '22 at 16:56
  • Simply, in nuxt3, you can use the Link element with the v-if operator directly in the view. This is not possible in nuxt2. – Владислав Сердобинцев Apr 04 '22 at 16:58
  • Since nowadays, we build mobile-first, you should not have a lot of stuff to add to a desktop stylesheet if your website is already mobile friendly. Toggling the styling by making an external request and parsing JS, is not more performant, nor practical. We're probably not talking about 3MB of CSS anyway, still CSS is far less _expensive_ to load than JS. It indeed looks like that [device](https://modules.nuxtjs.org/?q=device) is only supported by Nuxt2. Not sure what you meant by the `Link element` nor how it relates to the exposed bug. Your question is based on Nuxt2 or 3 here? – kissu Apr 04 '22 at 17:03
  • My question is about how dynamic loading of styles can be implemented in nuxt2. I have already heard your opinion that it is better to use media queries, but that will be next time. For the current situation, is there a working solution? After all, it may be that I will need styles for one particular page, but I will not be able to load them. – Владислав Сердобинцев Apr 04 '22 at 17:24
  • My first comment is still valid. Please try to make it working with something static at first. Does it work without the error? The error seems unrelated to any dynamic loading. – kissu Apr 04 '22 at 17:28
  • I checked each file individually. No issues found. And all styles loaded correctly. – Владислав Сердобинцев Apr 04 '22 at 17:35
  • If it's working when hardcoded, you can probably try to make a [dynamic import](https://stackoverflow.com/a/67825061/8816585) to make it work async + dynamic. – kissu Apr 04 '22 at 17:38
  • I tried to implement as you suggested referring to your June answer but got the exact same errors as in the update to question number 1. – Владислав Сердобинцев Apr 04 '22 at 18:18
  • You're not doing a dynamic import here, I cannot see a `await import`. Also, you have some TS errors, either fix those (I don't know how) or disable them. It is not helping the whole thing here. Lastly, are you sure your thing is working when hardcoded? How did you tried? Mind making an edit to show the working hardcoded SCSS import? – kissu Apr 04 '22 at 18:21
  • I didn't add the code to the new update already. But, apparently, you will have to. I'll do it now. – Владислав Сердобинцев Apr 04 '22 at 18:24
  • The latest errors are related to TS. Try to disable them. – kissu Apr 04 '22 at 18:34
  • 1
    Yes you are right. Didn't pay attention right away. I fixed it with @ts-ignore comments. Everything works as it should. Thank you very much! Let me now finish my work and issue an answer to my question. Or do you want to answer? – Владислав Сердобинцев Apr 04 '22 at 18:47

1 Answers1

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

should do the trick as explained in my answer here.

kissu
  • 40,416
  • 14
  • 65
  • 133