Minimal

src/assets/scss/bulma-build.scss

@@ -1,3 +1,4 @@
-@forward "components/utils/all";
+// the bulma forward needs to come first, ensuring that bulma already exists when theme code references it
 @forward "bulma/sass";
+@forward "components/utils/all";
 @forward "bulma";

src/assets/scss/components/utils/_variables.scss

@@ -12,20 +12,19 @@ $secondary: #6c757d !default;
 // alternative to focus-shadow-size
 $active-shadow-size: 0 0 0.5em !default;
 
-// make the custom colors extandable by providing a new variable to override
-$custom-colors: () !default;
-
-@forward "bulma/sass/utilities/derived-variables" with (
-    // adding aditional colors to colors map
-    $custom-colors:
-        map.merge(
-            // merge our custom-colors with the overridable map
-            ("secondary": $secondary),
-            $custom-colors
-        )
+@use "bulma/sass/utilities/derived-variables" as vars;
+
+// renamed with theme-bulma prefix to avoid namespace collision with the @forward below
+$theme-bulma-custom-colors: () !default;
+
+// using this syntax avoids doing @forward ... with (...) syntax, which throws errors due to load order
+vars.$custom-colors: map.merge(
+    // merge our custom-colors with the overridable map
+    ("secondary": $secondary),
+    $theme-bulma-custom-colors
 );
 
-@use "bulma/sass/utilities/derived-variables" as vars;
+@forward "bulma/sass/utilities/derived-variables";
 
 $sizes-map: (
     "small": vars.$size-small,

src/main-combined.scss

@@ -0,0 +1,8 @@
+@forward "assets/scss/bulma-build.scss" with (
+    // $primary gives us an easy visual indicator that styles are passing to the theme and bulma layers
+    $primary: #f00,
+    // $black tests for issues with load order in forward/use. since $black is used in initial variables, which is heavily used across the theme and bulma, it makes for a very effective test
+	$black: #000,
+    // $secondary is a theme var that gets merged into an existing bulma var ($colors), making it the weirdest thing in the library
+    $secondary: #00f,
+);

src/main-separated.scss

@@ -0,0 +1,21 @@
+$primary: #0f0;
+$secondary: #00f;
+$black: #000;
+
+// Bulma must come first, otherwise load order errors will happen
+@forward "bulma/sass" with (
+    // $primary gives us an easy visual indicator that styles are passing to the theme and bulma layers
+    $primary: $primary,
+    // $black tests for issues with load order in forward/use. since $black is used in initial variables, which is heavily used across the theme and bulma, it makes for a very effective test
+	$black: $black,
+);
+
+@forward "assets/scss/bulma.scss" with (
+    // this var passes just fine
+    $theme-bulma-custom-colors: (),
+    $secondary: $secondary,
+    // these vars cause errors
+    //$table-sticky-header-height: 200px,
+    //$checkbox-size: 1.25em,
+    //$datepicker-header-color: $primary,
+);

src/main.ts

@@ -9,6 +9,14 @@ import Examples from "@oruga-ui/examples";
 // add examples styles
 import "@oruga-ui/examples/dist/examples.css";
 
+// Two entry points for testing. Use one or the other, not both.
+
+// import main bundle with combined theme + bulma
+import "./main-combined.scss";
+
+// import main bundle with combined theme + bulma
+//import "./main-separated.scss";
+
 // add theme config
 import { bulmaConfig } from "./plugins/theme";
 

src/plugins/theme.ts

@@ -1,8 +1,10 @@
 import type { OrugaOptions, ComponentProps } from "@oruga-ui/oruga-next";
 import { isTrueish } from "@oruga-ui/oruga-next";
 
+// disabling so styles are not automatically included. the user should be determining their approach to how to include styles in their own code. if the user wants to configure the theme and bulma they'll need a separate scss file so they can @use with params. if the user doesn't want to configure then they're much better served by using the static css output.
+// TODO : remove after discussion
 // import theme style
-import "../assets/scss/bulma-build.scss";
+//import "../assets/scss/bulma-build.scss";
 
 const bulmaConfig: OrugaOptions = {
     field: {