CSS Cascade Layer - Importing Bootstrap - Undefined Mixin

Question

Having a play around with cascade layers for a new project and I seem to be getting an 'Undefined mixin' error when providing bootstrap with its own layer like so:

// Layers order
@layer bootstrap, theme, utilities, third-party;
    
// Variables
@import "1-variables/app";
    
// Theme mixins
@import "2-mixins/badge";
@import "2-mixins/button";
@import "2-mixins/modal";
@import "2-mixins/switch";
@import "2-mixins/tabs";
@import "2-mixins/theme";
    
// Bootstrap
@layer bootstrap {
    @import "~bootstrap/scss/bootstrap";
}
    
// Theme components
@layer theme {
    @import "3-components/accordion";
    @import "3-components/alert";
    @import "3-components/avatar";
}

Or even:

@import '~bootstrap/scss/bootstrap' layer(bootstrap);

The error:

ERROR in ./resources/sass/phoenix/phoenix.scss
Module build failed (from ./node_modules/laravel-mix/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
26 │     @include border-end-radius($alert-border-radius);

If I then import bootstrap outside of a layer, the project builds fine.

As you can see the order of my layers states that bootstrap is first, so this is odd to me.

Has anyone else ran into this issue?

Answer 1

I am not sure if my answer is 'best practices,' but I solved the import of bootstrap into @layer by importing mixins, functions, and variables into the global space.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

@layer bootstrap {
  @import 'bootstrap/scss/bootstrap';
}