I have a situation where I am using @use ... with to load styles from a component library and customise some of the values

e.g.

@use '@material/theme' with (
  $background: #fff,
  $surface: #f0f6ff,
  $on-primary: #fff,
  $on-secondary: #fff,
);

but I then want to use my customised $surface var in other files

So my question is how to have this @use ... with statement in one file “theme.scss” and then @use 'theme.scss' in my other files?

I tried @use 'theme.scss' as *; but I get undefined variable errors when I try to use $surface in the other file.