I have a create-react-app in which I am trying to upgrade bulma from version 0.9.4 to 1.0.1. So far, everything seems to have worked, with exception of the new dart method of overriding the colors.

I have the following (relevant) libraries loaded:

• react 18.2
• bulma 1.0.1
• sass 1.77.3

I followed this update page:
https://bulma.io/documentation/start/migrating-to-v1/

the color override file looks like this now:

// defining my own shizzle:
$muhcolor: #429dc8;

@use "bulma/sass" with (
$primary: $muhcolor, 
);
@import "bulma/sass/utilities/derived-variables";

// some test css:
body{
    background-color: brown !important;
}

npm scripts:

"prestart": "node aspnetcore-https && node aspnetcore-react",
"build-bulma": "sass --load-path=node_modules bulma-overrides.scss muh-bulma-project.css",
"start": "rimraf ./build && cross-env REACT_APP_ENVIRONMENT=DEV react-scripts start & build-bulma -- --watch ",

my app.js has the following imports (I tried switching them around to see if the order dependency would play a role):

import "../muh-bulma-project.css"
import "bulma/bulma.scss";
import "bulma/css/bulma.min.css";

my index.js

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.Fragment>
    <Provider store={store}>
      <App />
    </Provider>
  </React.Fragment>
);

When I run the all, the app is hideously brown, but the primary color is not overriden. The older method of overriding colors only worked in the older bulma version. Anyone have any idea what I’m missing?