What is the best way to import styles for desktop or mobile devices?

I manage three main folders on my project: base, pc, and mobile. The index.scss file from the base folder is always connected through the css section in nuxt.config.js.
To distinguish between different device types, I utilize the @nuxtjs/device module. Now, I am looking to load styles asynchronously for both mobile devices and PCs.

When attempting to implement this code in the default template, I encounter a parsing error.

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

Update 1:

Another approach I tried involves the following code snippet:

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

Unfortunately, this resulted in errors such as:

No .scss files are shown even in VS Code suggestions:

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

Console errors persist despite these updates:

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

This solution should solve the issue, as detailed in my response here.

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

There are no matching overloads in React for this call

Below is an error message in the code. It seems to be related to the usage of <IHistorical[]> in useQuery, but unfortunately, I haven't found a solution for it yet. Overload 1 of 2, '(props: Props | Readonly<Props>): ReactApexChart& ...

The Function-supported Operation is having trouble implementing a modification related to Geohash/Geopoint - the Object Type requires a String format

Summary: My function-based Action that tries to set a GeoPoint as a Geohash property is failing with an error suggesting it was anticipating a string. I have an Object Type with a String property that has been designated as a Geohash in the property edito ...

Effective implementation of Ts.ED BullMQ during server initialization

Recently, I started using Tsed(newb) and wanted to incorporate the BullMQ plugin into my project. I needed to run a job immediately after the server starts, but I struggled with implementing it correctly. I referred to this helpful guide here and attempte ...

Problem with Grouping of Columns in Material-UI

Having some trouble with column grouping in MUI data grid pro. I am using typescript and trying to implement column grouping, but encountering issues with the module GridColumnGroupingModel, which is used as the type definition for columnGroupingModel. Fol ...

unanticipated redirection with Vue router

Here is the routing code snippet: // exporting for component use export var router = new VueRouter(); // defining routes router.map({ 'home': { component: Home, auth: true }, 'login': { component: L ...

Tips for handling numerous observables in Angular 7

I am working on an Angular 7 application that deals with a total of 20 sensor data. My goal is to receive data from a selected sensor every 5 seconds using observables. For example: var sensorId = ""; // dynamically chosen from the web interface var senso ...

How can I incorporate my styles into a separate css file for use in a React project?

Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I hav ...

What is the best way to transform an array into an object and have it return a specific data

Trying to determine the argument type, but unsure of the next steps function convertArrayToObject(keys) { return keys.reduce((prev, key) => ({ ...prev, [key]: key}), {}) } const output = convertArrayToObject(['aa', 'bb']); // ex ...

Present relational data in a v-data-table using Vue and SQL Server

I have successfully created a Node App using Vue.js, Vuetify for the client side, and Express for the server side. The data is stored in a SQL Server database. Everything is functioning properly on my development machine with connections established betwee ...

The `NgForOf` directive is used to iterate over lists of strings or string arrays within a given `NgIterable` of strings or string

Here is a data type example: export interface TYPE_A { valueType: TYPE_A_VALUE_TYPES; value: string | string[]; } export enum TYPE_A_VALUE_TYPES { singleValue = "singleValue", multiValue = "multiValue", } In my component, I am ...

Dealing with Angular can be frustrating at times, especially when you encounter errors like "TypeError: Cannot

Encountering an Error Message... ERROR TypeError: Cannot read properties of undefined (reading 'geoCoord') at Object.next (customers.service.ts:16:38) When assigning fixed values to "lon" and "lat" variables, like 51.1634 and 10.4477, the f ...

A guide on incorporating Typescript into Material UI v5 themes

A similar question has been asked previously, however... I am looking to enhance my color options by adding variants such as success, warning, and more choices within the background category (palette.background). Specifically interested in a lite option t ...

How can I transfer the data from a file to upload it in Angular 9 without manually typing it out?

In my Angular application, I have a functionality where users can upload two files for processing on the server. However, I am looking to add a feature that allows users to simply copy and paste the contents of the files into two textboxes instead of going ...

Associate the generic operator <T> with a FunctionConstructor

In my TS function, I deserialize JSON into a specific type/object by providing it with a constructor function of that type which reconstructs the object from JSON. Here is how it looks like: export function deserializeJSON<T>(JSONString: string, ty ...

Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

Currently, I am in the process of developing an app using NativeScript 6.4.1 along with Angular 8. In order to enhance my styling capabilities, I have decided to incorporate SASS due to its advantageous features like variable names. My designer has suppli ...

Switching between TWO classes in Vuejs

I've been grappling with how to add or remove TWO classes in Vue JS for hours. The documentation examples only demonstrate toggling one class. My goal is to change a button's class to either: active toggle-on or toggle-off when clicked. While ...

Momentjs initially indicates that the date is valid, logs the correct date, and displays the accurate duration using .fromNow(). However, this suddenly switches

I am currently working on converting the createdAt date in my Nuxtjs application that is fetched from MongoDB using an express app, with the help of moment.js. Initially, when I check if the date is valid, it shows as valid but then it switches to an incor ...

What is the necessity of requiring a parameter with the type "any"?

There is a function in my code that takes a single parameter of type any: function doSomething(param: any) { // Code to handle the param } When I call this function without passing any arguments: doSomething(); An error is thrown saying: "Expected 1 ...

What are the essential requirements for an Angular application to function properly with minimal dependencies?

If a new developer wants to begin learning Angular from scratch, what are the essential npm packages that they need to install in order to start building an Angular application with minimal dependencies? ...

Troubleshooting a Vue.js issue with importing amChart data from a web API

Currently, I am delving into learning Vue.js alongside amCharts in an attempt to create a covid-19 dashboard as part of a test project. The data for this dashboard is being sourced from amChart's own web API. I am utilizing amChart's demo code f ...