如何为电脑或移动设备导入样式？

Question

我有三个文件夹：base、pc 和mobile。我总是通过 nuxt.config.js.
中的 css 部分从第一个文件夹连接 index.scss 为了确定设备类型，我使用 @nuxtjs/device。现在我想为移动设备和 PC 异步导入样式。

我尝试运行默认模板中的这段代码，但是出现解析错误。

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

更新 1:

我也试过这样的另一个代码：

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

我遇到了这样的错误：

即使在 VS Code 提示中也没有 .scss 文件：

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

控制台错误：

Answer 1

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

应该按照我的 .

中的说明进行操作

如何为电脑或移动设备导入样式？

How can I import styles for pc or for mobile?

typescript

vue.js

sass

vue-component

nuxt.js