My PWA adjusts the variables in a .scss file like this:

$rhap_theme-color: var(--ion-color-tertiary); // Color of all buttons and volume/progress indicators
$rhap_background-color: inherit; // Color of the player background

@import '../../../../node_modules/react-h5-audio-player/src/styles';

And the styles.scss looks like this:

$rhap_theme-color: #868686 !default;
$rhap_background-color: #fff !default;
$rhap_bar-color: #dddddd !default;
$rhap_time-color: #333 !default;
$rhap_font-family: inherit !default;

.rhap_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: $rhap_font-family;
  width: 100%;
  padding: 10px 15px;
  background-color: $rhap_background-color;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);

  &:focus:not(:focus-visible) {
    outline: 0;
  }

  svg {
    vertical-align: initial; // overwrite Bootstrap default
  }
}

However, @import statements are deprecated.

So, I replaced @import:

@include meta.load-css('../../../../node_modules/react-h5-audio-player/src/styles');

However, now the background variable isn’t overridden. How do I override the SASS variable when using include meta.load-css()?

Below the include, I can manually redefine the background variable:

.rhap_container {
  background-color: inherit
}

And then the background color changes. But obviously I want to override the variable like I was doing for @import, rather than just repeating the CSS all over again.