Undefined variable | Unable to load sass variables | Quasar | Webpack5

[jjoshi-space]

Summary

Hello team!
I'm trying to integrate Storybook into our Quasar application consisting of webpack5
The storybooks works well as long as it does not have any reference of sass variables
I've imported all the required files under preview.js along with its required plugins
Need help to load sass variables correctly, thereby allowing components to refer them

Sharing file contents responsible for configuring storybook

main.js

/** @type { import('@storybook/vue3-webpack5').StorybookConfig } */
const config = {
  stories: [
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-webpack5-compiler-swc',
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-webpack5-compiler-babel',
    '@storybook/addon-styling-webpack',
    '@storybook/preset-scss'
  ],
  framework: {
    name: '@storybook/vue3-webpack5',
    options: {}
  }
}
export default config

preview.js

import { setup } from '@storybook/vue3'
import { setupQuasarApp } from './setupQuasarApp'
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/dist/quasar.css'
import 'quasar/dist/quasar.sass'
import 'quasar/src/css/index.sass'
import '../build/variables.scss'
import '../src/css/app.scss'

setup(setupQuasarApp)
/** @type { import('@storybook/vue3').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i
      }
    }
  },

  tags: ['autodocs']
}

export default preview

setupQuasarApp.js

import { Quasar } from 'quasar'
import quasarUserOptions from '../src/utils/quasar-user-options'

export function setupQuasarApp(app) {
  app.use(Quasar, quasarUserOptions)
}

Additional information

Here's the error logged when building the storybook

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
  ╷
5 │       width: $thin-scrollbar;
  │              ^^^^^^^^^^^^^^^
  ╵
  src\components\datePicker\Calendar.vue 5:14  root stylesheet

Create a reproduction

No response

[jjoshi-space]

@valentinpalkovic @ndelangen
What are your suggestions for this scenario?

[jjoshi-space]

Utilized rsbuild-storybook config to tackle this problem statement
Further, sass loaders were passed to the config to address the core issue