Storybook and sass file import not working

Question

So I have a small vue cli with vue 3 + storybook project. I was starting to add stories for my components when I started getting errors about my styles. I went to storybook official documentation and followed this link: https://storybook.js.org/recipes/sass

It seemed pretty straight forward but I still got issue with step number 2. The addon they reccomend is just to resolve my sass styling which I decided to add to the .storybook/main.js file like so:

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;

The above works great to resolve the styling I have inside my components but the problem comes when I have something like variables or mixins inside the styling:

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

According to the documentation if I have global styling, which I do, I can just import it inside the preview.ts file but it doesn't seem to be doing anything previews.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;

Even after importing I still get an error while running npm run storybook that says:

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

Answer 1

After some help I only needed to change my scss rule into this on my main.ts file

config.module.rules.push({
   test: /\.scss$/,
   use: [
     'style-loader',
     'css-loader',
       {
         loader: 'sass-loader',
         options: {
         additionalData: `
           @import "@/styles/__main.scss";
         `
         }
       }
   ],
   include: path.resolve(__dirname, '../src'),
});