My ENVs aren't working

I cant use my env in my .css file, I do process.env.MainColor as my color for text and its not working, does anyone know why?
this is the whole part

h1 {
  font-style: bold;
  color: process.env.MainColor;
  font-family: Trebuchet MS;
}

You can’t use Environmental Variables in CSS files as they are not processed by Node. Also, if you are trying to protect background colors, that would not make much sense as CSS is rendered by the browser.

2 Likes

i am not trying to protect them per say, just make it easier for someone who remixes the project to change it so they have a list (env) of things they can change, is there any other way to do this?

You can just write comments like
/* EDIT THIS LINE TO CHANGE THE BACKGROUND COLOR */ or make a readme file.

good idea, ill do that

You can create css variables for easy modification:

/* list of css variables that you can edit */
:root {
  --variable-name: #ffffff; /* background */
}
/* rest of css code */
body {
  background: var(--variable-name);
}

background: var(—variable-name); does this need two dashes in front?

1 Like

Yes, it does need to have dashes in front.

1 Like

I was saying that because it only has one dash in front.

Yeah I know, my auto correct merged 2 dashes into 1 for some reason. I’ve corrected it.

1 Like