How to use SCSS and Tailwind CSS with Storybook in Next.js

I am trying to load a global scss file into storybook, but as soon as I changed the import from .css to .scss, I got errors that ranged from @ not being recognized in the @import tailwind to ERROR in ./styles/globals.scss. This is the error I am stuck on currently.

Here is my main.js file inside .storybook

//.storybook/main.js
module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../components/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
    })

    return config
  },
  framework: '@storybook/react',
}

//.storybook/preview.js
import '../styles/globals.scss'

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

And the error I get when I run storybook:

ERROR in ./styles/globals.scss
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

I was able to run storybook find with a normal global.css file, but when I added scss, I got errors.

Here is a list of my dependencies if that helps:

"dependencies": {
    "next": "12.0.7",
    "path": "^0.12.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.45.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.4.9",
    "autoprefixer": "^10.4.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "cypress": "^9.1.1",
    "eslint": "7",
    "eslint-config-next": "12.0.7",
    "eslint-plugin-storybook": "^0.5.3",
    "postcss": "^8.4.4",
    "postcss-loader": "^6.2.1",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.0"
  }