Импорт файлов Storybook и Sass не работает

Итак, у меня есть небольшой vue cli с проектом сборника рассказов vue 3 +. Я начал добавлять истории для своих компонентов, когда начал получать ошибки о своих стилях. Я зашел в официальную документацию сборника рассказов и перешел по этой ссылке: https://storybook.js.org/recipes/sass

Это казалось довольно простым, но у меня все еще возникли проблемы с шагом № 2. Аддон, который они рекомендуют, предназначен только для решения моего дерзкого стиля, который я решил добавить в файл .storybook/main.js следующим образом:

import type { StorybookConfig } from '@storybook/vue3-webpack5';
import path from 'path';
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/vue3-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  async webpackFinal(config) {
    if (config?.resolve?.alias) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src/'),
      }
    }

if (config.module?.rules) {
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../src'),
  });
}

return config
},
};
export default config;

Вышеупомянутое отлично работает для решения стиля, который у меня есть внутри моих компонентов, но проблема возникает, когда у меня есть что-то вроде переменных или примесей внутри стиля:

<styling lang = "scss" scoped>
  .loader{
    color: $color-primary;
  }
</styling>

Согласно документации, если у меня есть глобальный стиль, который у меня есть, я могу просто импортировать его в файл Preview.ts, но, похоже, он ничего не делает. превью.тс:

import type { Preview } from '@storybook/vue3';
import '../src/styles/__main.scss'

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

Даже после импорта я по-прежнему получаю сообщение об ошибке при запуске npm run storybook, в котором говорится:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
  ╷
3 │   color: $color-primary;
  │                     ^^^^^^^^^^^^
  ╵
  src/components/Loader/Loader.vue 3:21  root stylesheet

🤔 А знаете ли вы, что...
Vue.js является прогрессивным фреймворком, что означает, что его можно использовать постепенно, даже в существующих проектах.