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?

typescriptvue.jsimport

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

What are some effective ways to identify all Typescript and ESLint errors across the entire NextJS project, rather than just the currently opened files

In my current NextJS project, I am searching for a way to display errors and warnings across the entire project, rather than just within the opened files. How can I achieve this? ...

reactjstypescriptcompiler-errorsnext.jseslint

Incorporating Common Types for Multiple Uses

Is there a way to efficiently store and reuse typings for multiple React components that share the same props? Consider the following: before: import * as React from 'react'; interface AnotherButtonProps { disabled?: boolean; onClick: (ev ...

javascriptreactjstypescript

Error: Missing semicolon at line 1005 in Vue computed function. Vetur is indicating this issue

As a beginner in vue3, I am venturing into building some side projects. However, I keep encountering an error message stating ';' expected.Vetur(1005) when attempting to utilize the computed function. Strangely enough, sometimes the same syntax w ...

javascriptvue.jsvuejs3

Binding elegance and sophistication under specific circumstances

I'm currently working on a navigation component using nuxt.js, vue, and storyblok. The navigation consists of several items pulled from the storyblok API. My goal is to apply different styles to certain navigation items based on the 'highlighted& ...

vue.jsnuxt.jsstoryblok

Remove a record from Angular 2 Firebase collection

I've been searching extensively for a solution to this problem. Despite following the documentation on AngularFire 2 and Angular 2, I am unable to find a working answer. My goal is simply to delete a specific entry in my Firebase database using its un ...

angulartypescriptfirebasefirebase-realtime-databasekey

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Scenario: I am developing a time picker component for Angular 2. I need to pass values from Angular 2 Components to the jQuery timepicker in order to set parameters like minTime and maxTime. Below is the code snippet: export class TimePicker{ @Input() ...

javascriptjqueryangulartypescript

What is the best way to activate an input field in react-select?

Currently, I am working on a dropdown feature using react-select and have encountered some issues that need to be addressed: 1) The input field should be focused in just one click (currently it requires 2 clicks). 2) When the dropdown is opened and a cha ...

javascriptreactjstypescriptreact-select

Are you facing difficulties while trying to utilize useContext in your React application?

I have a basic React application where I need to implement useContext. (by the way, I am using Vite + React) Below is the code for my Context.jsx file: import React, {useContext} from 'react'; const emailContext = React.createContext(); expor ...

javascriptreactjstypescriptuse-context

Retrieving attributes by their names using dots in HTML

Currently working on an Angular 2 website, I am faced with the challenge of displaying data from an object retrieved from the backend. The structure of the object is as follows: { version: 3.0.0, gauges:{ jvm.memory.total.used:{ value: 3546546 }}} The is ...

javascripttypescriptangular

Combining package.json commands for launching both an Express server and a Vue app

I recently developed an application using Vue.js and express.js. As of now, I find myself having to open two separate terminal windows in order to run npm run serve in one and npm start in the other. My ultimate goal is to streamline this process and have ...

javascriptexpressvue.jsnpmnpm-scripts

Update the data table after a new file has been uploaded

As a novice web developer, I embarked on my first project using Vue. In this project, I created a form for file uploads in Vue 2 and Laravel. If you want to take a look at the full code: View: https://pastebin.com/QFrBfF74 Data table user file: https:/ ...

javascriptvue.js

What is the process for setting up a subrouter using React Router v6?

This is the current React Router setup I am using: const router = createBrowserRouter([ { path: "/", element: ( <Page activeNav="home" > <Home /> </Page> ) }, { ...

javascriptreactjstypescriptreact-routerreact-router-dom

Is there any need for transpiling .ts files to .js when Node is capable of running .ts files directly?

If you are using node version 12, try running the following command: node hello.ts I'm curious about the purpose of installing typescript globally with npm: npm install -g typescript After that, compiling your TypeScript file to JavaScript with: ...

javascriptnode.jstypescript

Navigating with Vue Router (History Mode) and Managing External Redirects in Webpack

Greetings SO Community, I am currently working on integrating external authentication into an existing Vue 2 application. However, I am encountering a problem where Vue Router does not seem to recognize the updated path and navigate to the correct compone ...

vue.jshttp-redirectwebpackvue-routerwebpack-dev-server

Angular2's ngControl is unable to retrieve default values

I have been working on a form using Angular 2 (RC.3) and noticed that the `ngForm` directive is not recognizing default values set with the `value` attribute. // app.component.html <form (ngSubmit)="onSubmit(editForm.value)" #editForm="ngForm"> &l ...

typescriptangular

Is it possible to utilize Vue's v-for function without the need for ul or ol elements?

Hey there, I'm just starting out with Vue and I'm looking to display some data in rows without using numbers or bullet points. Is there a different way to achieve this without the current approach I have below? <li v-for="product in contract. ...

vue.jsbootstrap-4v-for

Creating a custom data type using values from a plain object: A step-by-step guide

I recently came across an object that looks like this: const myObject = { 0: 'FIRST', 10: 'SECOND', 20: 'THIRD', } My goal is to define a type using the values from this object, similar to this: type AwesomeType = &apos ...

typescript

How to incorporate Mixin in your Nuxt template

I'm having trouble utilizing the mixin function in my template. Although Vue documentation states that mixins and components are merged, I am unable to call the function. getImage is not a function Mixin export default { data() { return { ...

javascriptvue.jsnuxt.js

Best practices for setting up PDAs in the Solana Anchor framework

Trying to create a basic Solana Program using Rust/Anchor that involves a PDA is causing a CPI error upon invocation, even though there doesn't appear to be any CPI happening (possibly due to the PDA account initialization). Below is the Program code ...

typescriptrustblockchainanchorsolana

Facing issues with vertical Tab display in Bootstrap using Vue.js - unexpected results

Below is the script I am working with: <vue-tabs class="row" direction="vertical" value="Description"> <div v-for="(siteParts, index) in sitePartLine"> <v-tab :title="sitePartLine[index].serial_no" v-if="sitePartLine[i ...

twitter-bootstrapvue.js