[sass] @import is deprecated by sass

[burtek]

Describe the bug

scss styles use @import rules to reference other style files. @import is now being deprecated and should be replaced by @use or @forward

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Import flexlayout-react/style/light.scss from an app using [email protected].

DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

    ╷
165 │ @import "_base";
    │         ^^^^^^^
    ╵
    node_modules/flexlayout-react/style/light.scss 165:9  root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.scale instead.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
4 │ $color_1: scale_color($color_base, $lightness: -3%) !default;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/flexlayout-react/style/light.scss 4:11  root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.scale instead.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
5 │ $color_2: scale_color($color_1, $lightness: -3%) !default;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/flexlayout-react/style/light.scss 5:11  root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.scale instead.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
6 │ $color_3: scale_color($color_2, $lightness: -3%) !default;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/flexlayout-react/style/light.scss 6:11  root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.scale instead.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
7 │ $color_4: scale_color($color_3, $lightness: -3%) !default;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/flexlayout-react/style/light.scss 7:11  root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.scale instead.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
8 │ $color_5: scale_color($color_4, $lightness: -3%) !default;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/flexlayout-react/style/light.scss 8:11  root stylesheet

Expected behavior

No warnings.

Operating System

n/a

Browser Type?

n/a

Browser Version

n/a

Screenshots or Videos

n/a

Additional context

In a react project, it might be easier to just import flexlayout-react/style/light.css, but importing .scss is useful when overriding defaults for the styles

https://sass-lang.com/documentation/breaking-changes/import/

[florxgomez]

I'm getting the same deprecation warnings after adding sass-embedded to my Vite project which uses flex-layout