Storybook: Unable to override vuetify sass variables using variables.scss

I have created some custom components on top of vuetify components. In order to match my design I have overridden the vuetify sass variables by creating a .scss file in path src/scss/variables.scss and written custom .scss as well. This works absolutely fine but when I try to import the components in my storybook I am unable to see the overridden design.

// .storybook/main.js

const path = require("path");

module.exports = {
  stories: [
    // "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    {
      name: "@storybook/addon-essentials",
      options: {
        docs: true
      }
    }
  ],

  webpackFinal: async (config, { configType }) => {
    config.resolve.alias["~storybook"] = path.resolve(__dirname);
    config.resolve.alias["@"] = path.resolve(__dirname, "..", "src");

    config.module.rules.push({
      test: /\.s(c|a)ss$/,
      use: [
        "style-loader",
        "css-loader",
        {
          loader: "sass-loader",
          options: {
            implementation: require("sass")
            prependData: "@import '@/scss/variables.scss';", // ISSUE IS HERE
            sassOptions: {
               indentedSyntax: false // Tried with both true and false
            },
 
          }
        }
      ],
      include: path.resolve(__dirname, "../")
    });
    return config;
  }
};