Nested imports / variables broken in 5.1

In v5.0.2, it is possible to import a customized bootstrap sass file within a selector:

.new-design-system {
   @import 'bootstrap-custom'
}

With this, and BS5’s new namespace, it is possible to have an older version of bootstrap side-by-side with a compartmentalized custom BS5, javascript and all. While not arguably not ideal (or not officially supported), this is extremely useful when iterating over an application with a legacy design system and gradually incorporating a new BS5-based design system.

In v5.1.0, this functionality is broken as the sass will not compile without importing functions, variables, and root at the root level, which also breaks the customizations.

[GUI]

I think this is maybe related to this this libsass bug: https://github.com/sass/libsass/issues/2830

I also ran into this when using libsass 3.6.5. However, I found a couple potential workarounds:

1. Use dart-sass instead. The original approach of importing bootstrap inside a nested selector seems to work with dart-sass (I tested with dart-sass-embedded 1.0.0-beta.11).

2. I was also able to get it to work with libsass by importing the bootstrap functions into the top-level namespace. This still accomplishes what I was trying to achieve (namespacing the Bootstrap CSS classes), but this seems to sidestep the issue of libsass not finding functions defined in a nested scope:

   @import "bootstrap/scss/_functions";
   .my-wrapper {
     @import "bootstrap/scss/bootstrap";
   }
   

[stephenhebert]

I just attempted to reproduce the issue in a sandbox environment, but I wasn’t able to.

https://codesandbox.io/s/nested-bootstrap-5-25dud

It must be related to my configuration – possibly the python sass compiler.

The error I’m seeing in my environment is:

CompileError at ...
Error: Function not found: to-rgb
...
>> $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));