storybook: Problem with using external scss files

Describe the bug Problem with using scss variables from external .scss files in components.

ERROR in ./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$colorblue".
        on line 34 of /Applications/MAMP/htdocs/storybook-test/components/ButtonDefault.vue
>>     background-color: $colorblue;

   ----------------------^

 @ ./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true&) 4:14-301 14:3-18:5 15:22-309
 @ ./components/ButtonDefault.vue?vue&type=style&index=0&id=1c1779e4&lang=scss&scoped=true&
 @ ./components/ButtonDefault.vue
 @ ./.stories/ButtonDefault.stories.js
 @ ./.stories sync nonrecursive ^\.\/(?:(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

To Reproduce Copy code from Code snippets and run comand: storybook from package.json scripts

Expected behavior I want to use external scss file with variables, mixins, functions etc in all components

Code snippets

// package.json
{
  "name": "storybook-test",
  "version": "1.0.0",
  "description": "My gnarly Nuxt.js project",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "storybook": "NODE_PATH=src start-storybook"
  },
  "dependencies": {
    "nuxt": "^2.5.1"
  },
  "devDependencies": {
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@nuxtjs/style-resources": "^1.0.0",
    "@storybook/cli": "^5.3.19",
    "@storybook/vue": "^5.3.19",
    "sass-resources-loader": "^2.0.3",
    "babel-preset-vue": "^2.0.2",
    "css-loader": "^3.5.3",
    "node-sass": "^4.14.1",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "vue-style-loader": "^4.1.2"
  }
}

// main.js
const path = require('path');


module.exports = {
  stories: ['../.stories/*.stories.js'],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-viewport/register'
  ],

  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      loaders: ["vue-style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../")
    });

    return config;
  }
};

// ButtonDefault.js
<template>
    <button :class="classes">
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: 'button-default',
    props: {
        size: {
            type: String,
            default: 'medium',
            validator: prop => [
                'small',
                'medium',
                'big'
            ].includes(prop)
        }
    },
    computed: {
        classes () {
            return [
                'c-btn',
                this.size ? `c-btn--${this.size}` : ''
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .c-btn {
        background-color: $colorblue;
        border-radius: 2rem;
    }

    .c-btn--small {
        padding: .5rem 1rem;
    }

    .c-btn--medium {
        padding: 1rem 2rem;
    }

    .c-btn--big {
        padding: 1.5rem 3rem;
    }
</style>

// /assets/styles/main.scss
$colorblue: #123456;

System: System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel® Core™ i7-5557U CPU @ 3.10GHz Binaries: Node: 10.15.2 - /var/folders/vc/ygvd8psn5sx0cqmc2rffwvdm0000gn/T/yarn–1591710521546-0.17786686071177726/node Yarn: 1.22.4 - /var/folders/vc/ygvd8psn5sx0cqmc2rffwvdm0000gn/T/yarn–1591710521546-0.17786686071177726/yarn Browsers: Chrome: 83.0.4103.97 Firefox: 75.0 Safari: 13.1.1 npmPackages: @storybook/addon-knobs: ^5.3.19 => 5.3.19 @storybook/addon-viewport: ^5.3.19 => 5.3.19 @storybook/cli: ^5.3.19 => 5.3.19 @storybook/vue: ^5.3.19 => 5.3.19