Bootstrap 5 no funciona con SASS @use y @forward.

Bootstrap dice en su documentación que la personalización funciona con dart-sass, pero eso simplemente no es cierto.

El sistema de módulos @use y @forward de la última versión de dart-sass no es compatible.

La forma “anterior” de agregar colores personalizados, con @import, era:

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";

$custom-theme-colors: (
  "testbeige": beige,
  "testgreen": lightgreen,
);

// fusionar los colores personalizados con los theme-colors
$theme-colors: map-merge($custom-theme-colors, $theme-colors);

// estilos globales de Bootstrap
@import "./node_modules/bootstrap/scss/bootstrap.scss";

Como puedes ver, estoy usando @import y funciona bien.

Pero en la documentación de SASS, aconsejan no usar @import, que será eliminado pronto de SASS.

Entonces, bien, ¡probemos con @use!

@use "./node_modules/bootstrap/scss/functions";
@use "./node_modules/bootstrap/scss/variables";
@use "./node_modules/bootstrap/scss/utilities";

// no es necesario ir más lejos, ya no funciona
// también puedes intentarlo con @forward, es lo mismo

La terminal muestra un error en la siguiente línea, y “$theme-colors” está subrayado:

en la terminal -> $theme-colors-rgb: map-loop($theme-colors, to-rgb, “$value”) !default;

De hecho, está subrayado, ya que el archivo scss no está utilizando la sintaxis de módulos, por lo tanto no podemos usar @use y @forward en Bootstrap v5.

Dart-sass ha estado aquí durante años, y @import está en desuso, ¿por qué mantuvieron esa sintaxis? He perdido horas intentando implementar esto para nada.

Y, en caso de que esté equivocado, ¿en qué fallé al implementar una personalización de Bootstrap con @use y @forward?

Muchas gracias.