javascript - 如何使用 javascript vuejs 有条件地导入内部 css？

Question

目前，我必须根据用户使用的浏览器类型有条件地导入 css 文件。为了不使 css 文件全局化，我有以下代码:

  created() {
      this.checkIsMobile()
  },
  methods: {
      checkIsMobile(){
        var isMobile = new MobileDetect(window.navigator.userAgent);
        if (isMobile.mobile()){
          $('head').append('<link rel="stylesheet" type="text/css" href="@/assets/css/main-pc.css">');
        }else {
          $('head').append('<link rel="stylesheet" type="text/css" href="@/assets/css/main-m.css">'); //must be load external css
        }
      },

它不起作用，因为它是内部 css。

我无法导入样式标签，因为我的 css 中有一些指向其他图像的链接。以样式导入会导致未找到相关模块

不上传css文件怎么办？

编辑:This question理论上和我刚才做的一样(没有 jQuery)

Answer 1

Vuejs 以不同的方式编译，因此导入或添加内部 css 文件到 head 不起作用。只需使用 require:

    if (isMobile.mobile()){
      require('@/assets/css/mobile.css');
    }else {
      require('@/assets/css/pc.css');
    }