React and LESS, use a dynamic value from process.env for variables

Question

I have an app with React with LESS.

I have a "mixins" LESS file like this:

@STATICS: "https://should-be-set-on-env";
@STATICS_KEY: "key-should-be-set-on-env";

.completePath(@property, @path) when (@property = 'background-image'){
  background-image: url("@{STATICS}/@{path}@{STATICS_KEY}") !important;
}

Currently I'm overwriting the @STATIC and @STATIC_KEY with some method that has customize-cra but now I can't use them (for X reason).

I need a way to read directly from the process.env values in order to have something like this:

@STATICS: readFromProcesEn(REACT_APP_STATICS);
@STATICS_KEY: readFromProcesEn(REACT_APP_STATICS_KEY);

How can I co it? is there a way with Less to read from an external file or some sort of JavaScript function, to get those values from process.env ?

Answer 1

This works for me:

@STATICS: `(function(){return process.env.REACT_APP_STATICS;})()`;
@STATICS_KEY: `(function(){return process.env.REACT_APP_STATICS_KEY;})()`;

Didn't know that Less could use javascript inside batticks.