I’m working on a project in the react, vite, typescript.

I encountered a problem that my stories do not see the values ​​of the style variables: ‘var(–primary-color) not found’ – in inspector browser.
I read about decorators, but I still could not figure out what adjustments to make to the storybook configuration files.

config/storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import path from "path";
import { mergeConfig, loadConfigFromFile, ConfigEnv } from "vite";


const config: StorybookConfig = {
  stories: [
    "../../src/**/*.stories.@(ts|tsx)"
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  core: {
    builder: '@storybook/builder-vite'
  },
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  async viteFinal(config, { configType }) {
    const configEnv: ConfigEnv = {
      mode: configType === 'PRODUCTION' ? 'production' : 'development',
      command: 'serve',
    }
    const userConfig = await loadConfigFromFile(
      configEnv,
      path.resolve(__dirname, "../../vite.config.ts")
    );

    const mergedConfig = mergeConfig(config, userConfig?.config ?? {});

    return mergeConfig(mergedConfig, {
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `
            @import "../../src/app/styles/index.scss";
            `
          }
        }
      }
    });
  },
};
export default config;

config/storybook/preview.ts

import type { Preview } from "@storybook/react";
import './../../src/app/styles/index.scss';
import {StyleDecorator} from '../../src/shared/config/storybook/StyleDecorator/StyleDecorator';

export const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [(Story) => (
    Story(StyleDecorator)
  )]
};

StyleDecorator.ts 

import 'app/styles/index.scss';
import {StoryFn} from '@storybook/react';

export const StyleDecorator = (story: () => StoryFn) => story();

CSS variables is working perfect, for example, when i use that in Button.module.scss:

.outline {
border: 1px solid var(--primary-color);
}