Namescaped variables

[zuojiang]

// values.css

@value size10: 26.66rem;
@value size20: 53.33rem;
...
@value size200: 533.33rem;

// style.css

@vlaue sizes: "./values.css"
@value (
  size10,
  size20,
  ...
  size200
)  from sizes;

div {
  width: size20;
}

It's normal, but too many variables need to be imported!

Is there a similar way?

div {
  width: var(sizes.size20);
}
/*or*/
div {
 width: $sizes.size20;
}
/*or*/
div {
  width: size20 from sizes;
}

How to configure with React and Webpack?