How to modify variables now that import is deprecated?

Open ptmkenny opened this issue 11 months ago • 1 comments

SASS 2 is going to remove @import statements.

I have been importing the audio player CSS 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';

styles.scss

$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;

When I change the @import to @use:

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

The background variable isn't overridden. How do I override the SASS variable when using @use?

I think I'm probably missing something obvious? Or does the player need to be updated to support SASS 2?