Specify the CSS bundle during the compilation of a Vue application

I am faced with the challenge of using a single code-base for my Vue application, but needing to compile it with different styles depending on the end user. Each end user (which in this case refers to a group or organization) has their own specific CSS file stored in subfolders within the public (or assets) directory. For example:

\public\user1\all.css
\public\user2\all.css
\public\user3\all.css

When building my application with npm run build, I want to be able to specify which CSS file to use, like so:

$ npm run build -css_path \public\user1\all.css

However, I'm unsure if this approach is technically feasible and if there is a better way to achieve this customization. What is the best practice for dynamically applying different styles to a Vue application during the build or compilation stage?

cssvue.jsnpm

Answer №1

To assign a specific value to an environment variable, such as userN, you can follow these steps:

  1. If your CSS files are in the public directory. Simply reference your CSS file in index.html using the environment variable:

    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %><%= VUE_APP_MY_VARIABLE %>/all.css">

    Then, build with 

    VUE_APP_MY_VARIABLE=user1 npm run build
    .

  2. If your CSS files are in the assets directory. You can use the same environment variable by importing the CSS file at the top of main.js (assuming default project structure):

    require('./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');

    or

    import(/* webpackMode: "eager" */'./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');

    Again, remember to build with 

    VUE_APP_MY_VARIABLE=user1 npm run build
    .

I also suggest creating a .env.local file with something like VUE_APP_MY_VARIABLE=user1 for local development and debugging purposes.

P.S. Consider using the cross-env package to simplify passing environment variables across different platforms. This ensures consistency when running commands like:

cross-env VUE_APP_MY_VARIABLE=user1 npm run build

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

In the v-bind:Style statement, check the condition

<div> <figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }"> </div> I need the background style attribute to display a color if the URL fetched from the API is und ...

javascriptvue.jsvuejs2

What is the process for loading a font file in Vue.js and webpack?

I've done a lot of research, but I couldn't find any links that show me exactly how to add fonts in VueJS. This is the method I'm using to import the font in my LESS file: @font-face { font-family: "Questrial"; src: url("../../fonts/Que ...

javascriptvue.jswebpackvuejs2less

Issue connecting to Oracle database: Unable to access properties of undefined (attempting to read '_getConnection')

Encountering an issue with node oracle connection. It was successfully connected before in the same application, but now it is not working after updating the node version. The connection string seems fine as the same connection is working in another appli ...

node.jstypescriptoraclenpmnode-oracledb

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

javascriptjqueryhtmlcss

Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most im ...

htmlcss

What is the best way to transpile when using vue-cli-service to build a library?

Currently, I am in the process of creating a library primarily consisting of .vue components for reusability across various projects (not intended for public npm use) using vue-cli-service. Everything appears to be set up correctly, and I can confirm that ...

vue.jsbabeljsvue-cli-3

Starting http-server in the background using an npm script

Is there a way to run http-server in the background using an npm script, allowing another npm script, like a Mocha test with jsdom, to make HTTP requests to http-server? To install the http-server package, use: npm install http-server --save-dev In your ...

javascriptnode.jsnpmbackground-processhttpserver

Unable to confirm form validation with Vue

Recently, I started working with Vue and encountered a problem while running the code below. The error message "ReferenceError: $vAddress is not defined" keeps popping up. Despite my efforts to search for solutions online, I couldn't find any that add ...

javascriptvue.jslaravel-5vuejs2

Diving deeper: Angular and NPM dependencies compared to devDependencies

After doing a lot of reading on this topic and following this very informative post at: What is the distinction between dependencies, devDependencies, and peerDependencies in an npm package.json file? I have learned that dependencies should include all ru ...

angularnpmnpm-install

Encountered an unfamiliar custom element: x while utilizing Buefy

Following the Buefy guidelines, I took the necessary steps. First, I ran: npm install Buefy Next, in my main.ts file, I imported Vue, Buefy, axios, and VueAxios like so: import Vue from 'vue'; import Buefy from 'buefy'; import axio ...

vue.jsbuefy

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...

javascriptjquerycss

Omitting an element from the CSS styling

How can I create a CSS selector that targets the text content within this snippet, excluding the <label> component? Essentially, I want to style the text in the div while leaving the label unchanged. <div id="edit-cc" class="form-item form-type ...

htmlcss

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

Issue encountered while attempting to npm install due to node registry error

I encountered a registry error while trying to run npm install. https://i.stack.imgur.com/zR73g.png npm ERR! code EPROTO npm ERR! errno EPROTO npm ERR! request to https://registry.npmjs.org/react failed, reason: write EPROTO 101057795:error:14077419:SSL ...

node.jsnpm

Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...

htmlcss

The 'name' property of Axios and Vuex is not defined and cannot be read

When making a call to axios in my mounted function to retrieve profile data, I send the payload to the 'set_account' Vuex store upon success. To access this data, I utilize MapGetters (currentAccount) in computed properties. However, when tryin ...

javascriptvue.jsaxiosvuex

How come child elements are clipped in IE versions 9 and above when using the border-radius property with a fixed value?

When applying css border-radius:[some value] to a parent element and having a fixed positioned child element, I noticed that in Internet Explorer the child element appears to be 'clipped' into the parent. However, if I use border-radius:0 in the ...

cssinternet-explorer-9

Cascading Style Sheets variable and Sassy CSS mixin

I'm facing a challenge involving the use of CSS variables in conjunction with my VueJs app. The goal is to make a hover effect (changing background-color) customizable by the application, while having a default value set in a nested SCSS map using the ...

cssvue.jssassscss-mixins

Set the page to be rigid instead of flexible

I'm struggling to lock this webpage in place, so it doesn't resize when the browser window changes. The text keeps collapsing whenever I adjust the size of the browser, and I can't figure out what's going wrong. Can someone please help ...

htmlcss