How to Add SCSS @import statements in Storybook, ReactJS

I am using Storybook in my ReactJS Project and I am unable to user scss @import statements. Error I am getting

ERROR in ./src/app/components/Button/button.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import 'Styles/style';
| .button {
|     @include openSans-font(1.2, 1, $open-sans-semiBold);
 @ ./src/app/components/Button/Button.jsx 11:0-23
 @ ./src/app/components/Button/index.js
 @ ./src/stories/Button.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js

My .storybook/webpack.config.js file,

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            Actions: path.resolve(__dirname, '../src/app/actions'),
            Components: path.resolve(__dirname, '../src/app/components'),
            Constants: path.resolve(__dirname, '../src/app/constants'),
            Containers: path.resolve(__dirname, '../src/app/containers'),
            Reducers: path.resolve(__dirname, '../src/app/reducers'),
            Services: path.resolve(__dirname, '../src/app/services'),
            Store: path.resolve(__dirname, '../src/app/store'),
            Selectors: path.resolve(__dirname, '../src/app/selectors'),
            Reducers: path.resolve(__dirname, '../src/app/reducers'),
            Routes: path.resolve(__dirname, '../src/app/routes'),
            Util: path.resolve(__dirname, '../src/app/util'),
            Hoc: path.resolve(__dirname, '../src/app/hoc'),
            Images: path.resolve(__dirname, '../src/assets/images'),
            Fonts: path.resolve(__dirname, '../src/assets/fonts'),
            Styles: path.resolve(__dirname, '../src/styles'),
        },
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
                include: path.resolve(__dirname, '../'),
            },
        ],
    },
};

My .storybook/main.js file,

const path = require('path');
const custom = require('./webpack.config.js');

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    webpackFinal: (config) => {
        return {
            ...config,
            resolve: { ...config.resolve, ...custom.resolve },
        };
    },
};

And my .storybook/preview.js file,

// import '../src/styles/style.scss';
import '!style-loader!css-loader!sass-loader!../src/styles/style.scss';

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

I have seen this problem in Storybook's GitHub Issues as well, But I none of their solution worked for me I am using local font files, And it shows error in that as well. Please help me out with this problem

This is how my button.scss looks

@import 'Styles/style';
.button {
    @include flexCenter();
    @include openSans-font(1.2, 1, $open-sans-semiBold);
    cursor: pointer;
    min-width: 8rem;
    transition: 0.1s;
    border-radius: 3rem;
    display: inline-block;
    text-decoration: none;
    border: 0.01rem solid $primary-color;
}