I have React project with scss configuration. When I create simple components with storybook I use global variables with @use "../../assets/styles/constants/_colors". It works well...

But if I import my simple components into the page I got this error: @use rules must be written before any other rules. I use @use at the very top level of the stylesheet.

I am m trying to change webpack configuration, but it doesn`t help me. My webpack style configuration:

 {
      test: /\.(scss|css)$/,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: require(path.join(__dirname, 'src/assets/styles/shared-scss-code.js')),
          },
        },
      ],
    },

shared-scss-code.js file:

const path = require('path');
const resources = [
  'bootstrap-variables.scss',
  '../../../node_modules/...',
  '../../../node_modules/...',
];
module.exports = resources.map((file) => path.resolve(__dirname, file));

sass-resources-loader option hoistUseStatements don`t help me to fix it.

I hope somebody can help me fix the problem...