How to import internal css conditionally with javascript vuejs?

Question

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)

Why is there jQuery in your VueJS app? For your VueJS app, are you using a bundler like webpack? If you are, this might help: stackoverflow.com/a/52769714/395910 — Terry
– Terry, Commented Dec 18, 2019 at 7:24
Why not just statically include a single CSS file and use media queries to override different rules for smaller screen sizes? — B. Fleming
– B. Fleming, Commented Dec 18, 2019 at 7:27
Does this answer your question? How to load css file dynamically — Michal Levý
– Michal Levý, Commented Dec 18, 2019 at 8:55

Hùng Nguyễn · Accepted Answer · 2019-12-19 10:20:20Z

3

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

answered Dec 19, 2019 at 10:20

Hùng Nguyễn

6391 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dbaron Over a year ago

I have tried the above technique and it works wonderfully in DEV. However upon migrating to PROD it seems as though both .css files are compiled. This results in the 'wrong' css styles being applied. Thoughts?

Hùng Nguyễn Over a year ago

@dbaron I think it depends on the method you used to compile css files. Usually it will have its own function to load compiled files.

Deepak Vasudevan · Accepted Answer · 2019-12-18 07:27:38Z

1

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

answered Dec 18, 2019 at 7:27

Deepak Vasudevan

3601 gold badge3 silver badges16 bronze badges

1 Comment

Hùng Nguyễn Over a year ago

I can't use this with condition

Milesq · Accepted Answer · 2019-12-18 09:25:22Z

0

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

answered Dec 18, 2019 at 9:25

Milesq

3683 silver badges10 bronze badges

1 Comment

Hùng Nguyễn Over a year ago

I used this library github.com/hgoebl/mobile-detect.js to detect screen size, seems reliable. Detecting mobile using CSS might be the answer, but it break my work flow

Collectives™ on Stack Overflow

How to import internal css conditionally with javascript vuejs?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related