Loading different CSS based on deployment

Question

We currently have a shared backend and frontend for two projects. Project B is essentially just a subset of Project A. It has all the same features except for a few that we restrict.

Using the dotenv module in node I am able to restrict loading of certain routes so the backend is all handled with environment variables. However, the frontend has a different primary color scheme (Blue instead of purple) and the logo is also different.

How would I go about loading these two differences depending on the environment/deployment? I tried putting all the common css in one file and from there importing them in. I guess the main difference in the frontend is that projA is a different theme then projB. Some of the components I can hide/show with a conditional in reacts render function.

main.scss:

@import _projA.scss
@import _projB.scss

Then in my webpack config I pass an environment variable through the npm build script and exclude either _projA or projB.scss. This still loads both and i'm guessing its because the main scss file imports both.

EDIT: https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

Would it be possible to add another entry point in webpack and have it compile the css into like a _custom.scss that the main one would import instead? The enviroment variable would then decide which of the _proj<letter>.sccs to include? — user6728767
– user6728767, Commented Mar 26, 2019 at 17:26

Angel Roma · Accepted Answer · 2019-03-26 17:33:42Z

1

Custom Environment Variables

Note: this feature is available with [email protected] and higher.

These environment variables will be defined for you on process.env file and depending on your environment (npm start, npm run build, npm test) they will be rendered as needed.

One import only is required and React will handle the rest for you, create your env. files and use it like this:

@import REACT_APP_STYLE

Example of a Custom Environment Variable in .env.development.local file for npm start:

REACT_APP_STYLES = _projA.scss

More information about custom environment variables.

answered Mar 26, 2019 at 17:33

Angel Roma

4174 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user6728767 Over a year ago

Wow that's pretty cool! However, I'm not quite sure how this will work for me. Right now in my package.json, I have a build script that does node_modules/.bin/webpack; mv public ./backend Then when I hit the route, my backend serves up the public folder which contains my frontend site.

user6728767 Over a year ago

I found this which is a pretty good read. medium.com/@trekinbami/…

Angel Roma Over a year ago

I've implemented this solution a while ago beside the env-cmd package so I can generate a different build or a hot-reloading development environment depending on the needs, for example: npm run build:env1 and npm run build:env2 npm run start:project1, npm run project3.

user6728767 Over a year ago

Is it possible to import the environment variable in a scss file though? Such as @import process.env.TEST_CSS; in main.scss

Angel Roma Over a year ago

Pretty nice question, and it's posible according to facebook.github.io/create-react-app/docs/…

|

Collectives™ on Stack Overflow

Loading different CSS based on deployment

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related