The purpose of this project is to be able to have the same application working for different brands. Its idea is that all brands would use the same components but they would be styled differently for each brand, using SASS variables.
Note that this approach can also be used to style components coming from third party
libraries, since all SASS variables are applied for the global scope (since they
are loaded through vue.config.js
file).
There are just a few differences:
- We are passing in an environment variable called
VUE_APP_BRAND
that will specify which brand styles should be loaded. Learn more about environment variables and modes. vue.config.js
will take the value of that env variable and will load the right SASS entrypoint accordingly. Note that this will also be reflected in the final build.- The variables defined in each
_variables.scss
can be used in any component.
Getting started is easy through docker-compose
, just run:
docker-compose up
Then hit http://localhost:8080
and http://localhost:8090
to see each brand's app.