@use syntax not supported - Sass deprecation warnings with @import

[julien-]

Problem

The library currently relies on the legacy @import syntax for Sass, which triggers deprecation warnings in modern Sass versions and prevents users from adopting the new @use module system.

Current behavior

When trying to use BCL with the modern @use syntax:

@use "@openeuropa/bcl-bootstrap/scss/functions";
@use "@openeuropa/bcl-bootstrap/scss/mixins";
@use "@openeuropa/bcl-bootstrap/scss/variables";
@use "@openeuropa/bcl-theme-default/src/scss/base/variables";
@use "@openeuropa/bcl-theme-default/src/scss/badge";

Error occurs:

Error: Undefined mixin.
    ╷
494 │ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/@openeuropa/bcl-bootstrap/scss/_variables.scss 494:1

Root cause

When using @use, each file has its own namespace and mixins are not automatically available globally. The BCL files internally call mixins like _assert-ascending() without namespace prefixes, which fails when imported via @use.
#Current workaround
We have to use the deprecated @import syntax:

Works but triggers deprecation warnings

@import "@openeuropa/bcl-bootstrap/scss/functions";
@import "@openeuropa/bcl-bootstrap/scss/mixins";
@import "@openeuropa/bcl-bootstrap/scss/variables";
@import "@openeuropa/bcl-theme-default/src/scss/base/variables";
@import "@openeuropa/bcl-theme-default/src/scss/badge";

.badge a {
  @extend a, .badge;
}

Expected behavior

BCL should be compatible with the @use which is the recommended approach since Sass migrated away from @import.
##Proposed solution
Update BCL's Sass architecture to support @use:

Option 1 Forward all dependencies:

Create an _index.scss file that forwards all necessary dependencies:
_@openeuropa/bcl-bootstrap/scss/index.scss

@forward "functions";
@forward "mixins";
@forward "variables";

Benefits

Users can import everything with:

@use "@openeuropa/bcl-bootstrap/scss" as bcl;

.custom-element {
  @include bcl.my-mixin();
  color: bcl.$primary-color;
}

Option 2: Make components self-contained

Each component file should explicitly include its dependencies:
badge.scss

@use "../bootstrap/scss/functions" as *;
@use "../bootstrap/scss/mixins" as *;
@use "../bootstrap/scss/variables" as *;
...

Benefits

Cleaner dependencies: Explicit dependency management

[allternativ9]

Hi Julien,
Thanks for raising this.
We are actively working on this and is planned to be delivered with end of November release.

Many thanks,
Angela.

[tibi2303]

For now, after checking we are limited by bootstrap, they are not using use. So we need to wait for them to do that but for now i created the possbility for easy change after bootstrap updates by adding module-friendly BCL entry and declare partial deps

[tibi2303]

#713