sass-loader set up in storybook according to docs but not compiling sass

I'm following Storybook's documentation to enable sass scoped on my components, however I can't figure out quite the issue that's happening. There is some error going on with the loaders it seems:

ERROR in ./src/stories/Button.vue?vue&type=style&index=0&id=361c6da7&lang=scss&scoped=true& (./node_modules/vue-docgen-loader/lib??ref--12!./node_modules/vue-loader/lib??vue-loader-options!./src/stories/Button.vue?vue&type=style&index=0&id=361c6da7&lang=scss&scoped=true&) 58:7
Module parse failed: Unexpected token (58:7)
File was processed with these loaders:
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-docgen-loader/lib/index.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> button {
|   span {
|     display: block;

Here is my component:

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">
    <span>{{ label }}</span>
  </button>
</template>

<script>
import './button.css';

export default {
  name: 'button',

  props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator: function (value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
    },
  },

  methods: {
    onClick() {
      this.$emit('onClick');
    },
  },
};
</script>
<style lang="scss" scoped>
button {
  span {
    display: block;
    width: 1000px;
  }
}
</style>

And here is storybook's main.js:

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
    "@storybook/addon-actions",
    "@storybook/addon-docs",
    "@storybook/addon-knobs",
    "@storybook/addon-viewport",
  ],
  webpackFinal: async (config, {configType}) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.(css|scss)$/,
      use: [
        'style-loader', 'css-loader', 'sass-loader',
        {
          loader: "sass-loader",
        }
      ],
      include: path.resolve(__dirname, '../')
    });

    return config;
  }
}

I have configured it to use sass-loader, and it should be able to compile both css and sass. I'm not sure if I'm missing a loader?

I also have vue-loader installed