changed to @use instead of @import

[sora-san45]

Related: #309

[ibmdotcom-bot]

Deploy preview created:
https://ibm.github.io/plex/deploy-previews/506/index.html

Built with commit: b5f34aa7792d424dab56e976dfa5f2ec6485f2a7

[sora-san45]

@tay1orjones could you check this

[tay1orjones]

Hi, thanks for making this update! Can you confirm this works for you? Maybe through an example stackblitz or something similar?

[tay1orjones]

I'm not sure if this will work because @use declarations are required to be the first thing in the file. Defining the $font-prefix variable first will have no impact on the path provided to ibm-plex.scss.

We may need to reconfigure how the scss is generated to support sass module configuration using with

@use 'node_modules/@ibm/plex/scss/ibm-plex.scss' with (
  $font-prefix: './custom/path/to/font/files';
);

[tay1orjones]

To be clear, I don't think the above will work with the way the scss is structured right now

[tay1orjones]

This is outlined in #370, but the entire repo needs to be updated so the output uses @forward and is compatible with the sass module system provided by dart-sass. This change can't be made until that is complete.