Dynamic import of a SASS file in VueJS using a variable such as process.env

Is there a way to dynamically import a file using environment variables?

I want to include a specific client's general theme SCSS to my app.vue (or main.ts)

I'm thinking of something along the lines of:

<style lang="sass">
  @import"./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";
</style>

or

import "./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss";
                           

How can I make this work?

If I try using import (in the main.ts), it gives me an error saying

Object is possibly 'undefined'.

If I try using <style> and @import (inside app.vue)

undefined ^ Media query expression must begin with '('

Any suggestions on how to achieve this?

Answer №1

During my research on dynamically importing modules in ES6, I stumbled upon this discussion which proposed utilizing import() as a function, and surprisingly, it worked flawlessly:

import("./themes/" + process.env.VUE_APP_CLIENT + "/assets/scss/theme.scss");

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

Configuring global runtime variables in NextJS for server-side operations

Currently, I am utilizing the instrumentation.ts file in NextJS to retrieve configuration dynamically when the server starts up. My goal is to have this configuration accessible during runtime for all API routes and server-side components. What would be th ...

Is there a way to compare two regex values using vuelidate?

Can someone assist me with validating an input field using vuelidate? I am looking to return a valid result if either of the two regular expressions provided below is true. const val1 = helpers.regex('val1', /^\D*7(\D*\d){12}\ ...

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Hey there, I need your expertise to review this code and help me locate the issue causing variable "itemCount" to not display any value in about.component.html while everything works fine in home.component.html. I am attempting to only show "itemCount" in ...

What is the best way to connect input values with ngFor and ngModel?

I am facing an issue with binding input values to a component in Angular. I have used ngFor on multiple inputs, but the input fields are not showing up, so I am unable to push the data to subQuestionsAnswertext. Here is the code snippet from app.component ...

Crystal-clear TextField component in Office UI Fabric

Seeking advice on how to clear a masked text field from Office UI Fabric using a button. Does anyone have a solution for this? I attempted to set the value using a state, but unfortunately, it did not work as expected. ...

Using the hook to implement the useContext function in React

I came across this definition export interface user{ email:string name:string last_name:string } export type UserType= { user: user; setUser:(user:user) => void; } const [user,setUser] = useState <user> ({ email ...

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

Seeking guidance on resolving the issue with finding module './audio/audio1.mp3' or its type declarations. I have already attempted using require('./audio/audio1.mp3'), but continue to encounter an error. ...

Guide on importing absolute paths in a @nrwl/nx monorepo

I am currently working on a @nrwl/nx monorepo and I am looking to import folders within the project src using absolute paths. I attempted to specify the baseUrl but had no success. The only solution that did work was adding the path to the monorepo root ts ...

Ionic - Deleting an item from local storage

Currently, I am implementing local storage for my Ionic application. While I can successfully add and retrieve data from local storage, I encounter an issue when trying to delete a specific object - it ends up removing everything in the database. Moreover, ...

There is no overload that fits the current call | Typescript, React, and Material UI

Embarking on my TypeScript journey with React and Material UI, I am hitting a roadblock with my initial component. // material import { Box } from '@material-ui/core'; // ---------------------------------------------------------------------- ...

Is there a way to programmatically select an option value in a v-select component using vue.js 2?

I'm attempting to designate the option with a value of 1 as selected, but I am encountering difficulties when using the v-select component from Vue.js. This is how I have attempted to achieve it - <v-select name="branchid" v-model="branchid" ...

The payload from the Axios POST request is failing to reach its destination endpoint

I have two Express servers up and running - a gateway and an authentication service. I am facing an issue where the payload I set in the body of a request from my gateway to the authentication server never seems to arrive, despite there being no apparent C ...

Save user entries in a database array

I'm working on developing a platform for advertisements where users can create detailed profiles with images. To achieve this, I need to store the information in an array within a backend database for future retrieval. Below is an example of the backe ...

If I include the Next.js Image component within a React hook, it may trigger the error message "Attempting to update state on an unmounted component in React."

My UI layout needs to change when the window width changes. However, when I add an Image (Nextjs component) in my hook, I encounter an error message. I am not sure why adding Image (Nextjs component) is causing this problem. The error message is display ...

Incorrect SQL Server DateTime referencing when using .NET Core framework causes insertion and updating errors

Having some issues while trying to store DATETIME values in my SQL Server database using .NET Core & Entity Framework. The data is fetched from a VueJS API call and sent in this format: ... lastModified: "2019-10-28T10:54:07.556Z" ... Upon receiving the ...

The overload functionality in Typescript interfaces is not functioning as intended

Here is a snippet of code I'm working with: class A { } class B { } class C { } interface Builder { build(paramOne: A): string; build(paramOne: B, paramTwo: C): number; } class Test implements Builder { build(a: A) { return &apo ...

Challenges with implementing Typescript in Next.js and the getStaticProps function

Having trouble with the implementation of getStaticProps where the result can be null or some data. The typings in getStaticProps are causing issues, even after trying conditional props. Any suggestions? type ProductType = { props: | { ...

A Step-by-Step Guide on Importing Components in Vue.js

I have defined the following component as shown below: import Vue from 'vue'; import Datepicker from 'vuejs-datepicker'; Vue.component('DatePicker', { template: ` <datepicker name="date"></datepicker> ` ...

What could be the reason for Typescript attempting to interpret files in the `./build` directory as input files?

After struggling for an hour on this issue, I am stuck. The variables outDir and rootDir are set. However, the problem arises when only src is included in include, TypeScript shows the configuration via showConfig, yet it's attempting to compile 4 fi ...

Having trouble adding global method using Plugin in Vue 3?

I have been working on creating a method that can generate local image URLs to be used in any template automatically. However, I encountered an issue while trying to develop a plugin that adds a global property. Plugin Implementation: // src/plugins/urlb ...