SassError: @use rules must be written before any other rules.

[aftabnaveed]

When trying to customise the styles as per the documentation I am getting an error

@use "react-widgets/scss/react-widgets" with (
  $widget-font-size: 16px,
  $input-height: 2.5em
);

The error

SassError: @use rules must be written before any other rules.

What can be going wrong here?

[jquense]

are you writing your @use after other things?

[aftabnaveed]

Yep, I am using it after my SASS imports

@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

// React Widgets is a separae package.
@import "react-widgets/scss/styles.scss";

@use "react-widgets/scss/react-widgets" with (
  $widget-font-size: 16px,
  $input-height: 2.5em
);

[jquense]

that is the problem, it must be before imports

[aftabnaveed]

The error now has changed, and now it's not able to find the stylesheet.

@use "react-widgets/scss/react-widgets" with (
    $widget-font-size: 16px,
    $input-height: 2.5em
);

// React Widgets is a separae package.
@import "react-widgets/scss/styles.scss";

@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

and the error now is:

SassError: Can't find stylesheet to import.
  ╷
1 │ ┌ @use "react-widgets/scss/react-widgets" with (
2 │ │     $widget-font-size: 16px,
3 │ │     $input-height: 2.5em
4 │ │ );
  │ └─^

I confirmed the styles.scss already exists in the given path.

[jquense]

please read the docs: http://jquense.github.io/react-widgets/docs/theming#customize they outline how to do it.

[aftabnaveed]

Thank you very much that helped!