5 Tips for Importing Internal CSS Conditionally Using JavaScript in Vue.js

At the moment, I am facing a challenge where I need to import a CSS file conditionally based on the user's browser. To keep the CSS file from being global, I have implemented 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
        }
      },

However, this approach does not work as expected because it involves internal CSS.

I am unable to import within a style tag due to some links to other images in my CSS. Doing so leads to the error relative modules were not found

Is there a way to achieve this without having to upload the CSS file elsewhere?

Edit: For more insights into a similar issue (without using jQuery), you can refer to this question.

javascriptcssvue.js

Answer №1

Vuejs undergoes a unique compilation process, making traditional methods like importing or adding internal CSS files to the header ineffective. The solution lies in utilizing require:

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

Answer №2

Could you give this method a shot?

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

Find more information at:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching for row/column labels within a screen showcasing numerous tables

My current task involves working with two tables displayed on a screen. Table 1 contains specific data that I need to verify. The goal is to confirm the presence of the correct column and row headings in each table. I attempted to achieve this using the ...

javascripttestingautomated-testse2e-testingtestcafe

Angular 4 applications do not come with TinyMCE embedded

I've been attempting to integrate the tinyMCE editor into an angular4 application, but unfortunately I encountered an error that reads: tinyMCE is not defined. https://i.stack.imgur.com/qMb5K.png I have been following the guidance provided by tin ...

javascriptnode.jsangularjhipstertinymce-4

Is there a way to navigate to a dynamic URL within an HTML document?

My current code displays HTML redirects based on the employee's ID, but I believe it can be more efficient. Here is my existing code: {% if user.employee.employee_id == 2 %} <head> <title>HTML Redirect</title> ...

pythonhtmlcssdjangoauthentication

Is it feasible to implement automatic window closure on the alternate website?

Imagine I have a website, let's say http://myownsite.com, and my desire is to execute a script that will open a new window on Safari or any other browser for a site which I do not own: http://theothersite.com If I lack control over that specific site ...

javascript

What is the best way to ensure that the table header is printed on every page when printing?

My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...

javascriptphpjqueryhtmlcss

What is the best way to transmit two distinct sets of data from a child component to the v-model of a parent component?

Currently, I am working on a project using vuejs 2 and typescript. In this project, I need to pass two different sets of data - data and attachments - within the parent component. I am utilizing vue-property-decorator for this purpose. However, I am facing ...

javascripttypescriptvue.js

ERROR: The value property is undefined and cannot be read in a ReactJS component

Can someone help me with the error I'm encountering in the handleChange function? I'm not sure what the issue could be. const [testState, setTestState] = useState({ activeStep:0, firstName: '', lastName: '&apos ...

javascriptreactjsreact-nativematerial-ui

Ensure that you decode the URL before making any changes to the location in a

Hi everyone, I'm facing an issue and need your help. Let's say we have a URL like site.com/post?comments=1,2,3,4. When I paste it into the browser address bar, my app opens and decodes the URL to site.com/post?comments=1%2C2%2C3%2C4. How can I re ...

javascriptreactjsreact-router

Select the Best jQuery Package

Having a variety of packages available for selection. <div class="image-grid-item" data-search="select"> <input name="pack1" type="checkbox" style="display: none;"> </div> <div class="image-grid-item" data-search="select"> <inp ...

javascriptjquery

Managing the height of a hero section with TailwindCSS and React.js

Embarking on my first website project using React and Tailwind has been an exciting learning experience. My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen. To bring this concept ...

htmlcsstailwind-css

Angular JS is having some issues with rendering the style correctly

How can I make input fields turn pink before values are entered and green after values are entered? Currently, the styling only applies to the first row. What could be causing this issue? <script src="https://ajax.googleapis.com/ajax/libs/angularjs ...

cssangularjs

How to customize the preview grid design in material-ui-dropzone

I am working on a book form page in my React app which includes an option to upload a cover photo. I opted for material-ui-dropzone from https://yuvaleros.github.io/material-ui-dropzone/ and it's working well, but I encountered an issue with the previ ...

javascriptreactjsmaterial-ui

Prevent Buttons from Being Clicked While Another is Active in Angular

I am facing a challenge with my Angular functions that enable search features. My goal is to allow only one feature to be selected at a time. /* Trauma Search functionality */ $scope.traumaSearch = false; $scope.traumaText = "Trauma Center"; $scope.togg ...

javascriptangularjs

Unexpected gap located at the top of the div

I am experiencing two perplexing issues with my website. The first problem involves text overlapping and extending beyond the content area. I have tried using the break-word property to address this issue, but unfortunately, the bug seems to be originating ...

htmlcss

When using React, appending a React Link tag to an existing list item may result in the addition of two objects instead of the desired

Trying to create a loop that checks if an object's date matches with a date on a calendar. If it does, I want to add a React Link tag to the respective li element. The loop logic works well, but the issue is when appending the Link tag using createTex ...

javascriptreactjshyperlinkappendhtml-lists

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

Is there a way to keep an element fixed on the display without using position: fixed? I want the element to always remain above other elements, so I used z-index. Additionally, I would like the element to be able to move horizontally without scrolling acro ...

htmlcss

What could be the reason for npm not compiling properly?

I'm currently working with Laravel and Vue.js and recently encountered an error after making a small change in the router.js file. The error occurs during compilation. Any suggestions for a solution? C:\Users\PhpCoder\Documents\G ...

laravelvue.jsnpm

Vue.js component mismatch in the layout

Attempting to set up a Vue application with vuetify while incorporating layouts. As a newcomer to Vue, I may have made some beginner errors. Here is the structure of my app: main.js // The Vue build version to load with the `import` command // (runtime- ...

javascriptvue.jsvue-routervuetify.js

Instructions on changing row color with button click and reverting back to original color upon subsequent click

When the button is pressed, I'd like to change the color. When the same button is pressed again, I want it to revert back to its original color. Currently, when the button is clicked, all rows change color. Sample Code Snippet: <table> & ...

htmlcssangularjs

Eliminate HTML tags when CKEDITOR is switched

I recently switched from a normal textarea to CKEDITOR, with a toggle button that allows users to switch between the two. However, I encountered an issue where HTML tags are not removed after destroying CKEDITOR if there was existing content in it when swi ...

javascripthtml