'How to import internal css conditionally with javascript vuejs?

Currently, I have to import css file conditionally depend on which kind of browser users are using. To not making css file global, I have the following code:

  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
        }
      },

It does not work because it's internal css.

I can not import in style tag because there are some link to other images in my css. Importing in style will lead to relative modules were not found

How should I do with without uploading css file to somewhere?

Edit: This question is theoretically the same as what I just did (without jQuery)

javascriptcssvue.js


Solution 1:[1]

Vuejs compiles in a different way, so import or adding internal css file to head does not work. Simply use require:

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

Solution 2:[2]

Can you try the following method?

<style scoped>
@import './../file.css';
</style>

Source URL: https://forum.vuejs.org/t/how-to-import-css-files-into-single-file-component/41337

Solution 3:[3]

You shouldn't use JQuery. It is slow, big size and everything that you using jquery you can do in Vue.

Second, you shouldn't detect screen size in JS, but in CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hùng Nguy?n
Solution 2 Deepak Vasudevan
Solution 3 Milesq

Related Questions