there is one single code-base for my vue.js application, but for different end users I need to compile this application with different styles. Let’s say in my public (or assests) folder there is subfolders with css for each single end user (by users in fact I mean a group/organization). So, there is subfolders like:
And when I build my application (npm run build) I need to apply somehow specific styles. Something, like
$ npm run build -css_path \public\user1\all.css
But I don not know, if it is technically possible and if I’m on the right track. Probably, it should be done some other way. So, what is the best practice to apply different styles to vue.js application on the fly (on build or compilation stage)?
You can specify environment variable with a particular value, in the case I think it would be userN values.
If css files in the public directory.
Just reference the css file in index.html with environment variable:
<link rel=”stylesheet” type=”text/css” href=”<%= BASE_URL %><%= VUE_APP_MY_VARIABLE %>/all.css”>
And build with VUE_APP_MY_VARIABLE=user1 npm run build
If css files in the assets directory.
Using the same env variable but we should import that css file in the top of the main.js(if you use default project structure):
require(‘./assets/custom/‘ + process.env.VUE_APP_MY_VARIABLE + ‘/all.css’);
import(/* webpackMode: “eager” */‘./assets/custom/‘ + process.env.VUE_APP_MY_VARIABLE + ‘/all.css’);
And build with VUE_APP_MY_VARIABLE=user1 npm run build as well.
I also recommend to create .env.local with, for instance, VUE_APP_MY_VARIABLE=user1 to be able to serve the local site and reference some default style to debug the app.
P.S. Check cross-env package which make the life easier with passing env variables. Because my build string is related to bash. With that package it would be cross platform:
cross-env VUE_APP_MY_VARIABLE=user1 npm run build