title: How to add SASS support to storybook
body: <p>I have a Vue application created with Vue Cli and I'm trying to put sass support inside my storybook but I'm receiving this error when I run the storybook:</p>
  <pre><code>ERROR in ./src/components/atoms/TinyMCE/TinyMCE.vue?vue&amp;type=style&amp;index=0&amp;id=4762223c&amp;scoped=true&amp;lang=scss (./node_modules/vue-docgen-loader/lib??ref--12!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/dist??ref--3!./src/components/atoms/TinyMCE/TinyMCE.vue?vue&amp;type=style&amp;index=0&amp;id=4762223c&amp;scoped=true&amp;lang=scss)
  Module build failed (from ./node_modules/style-loader/dist/cjs.js):
  TypeError: this.getOptions is not a function
      at Object.loader (C:\trabalho\repositories\mb-redesign-front\node_modules\style-loader\dist\index.js:19:24)  
  </code></pre>
  <p>My main.js file of storybook is configurated with webpackFinal according the docs of storybook:</p>
  <pre><code>const path = require(&quot;path&quot;);
  
  module.exports = {
    stories: [&quot;../src/**/*.stories.mdx&quot;, &quot;../src/**/*.stories.@(js|jsx|ts|tsx)&quot;],
    addons: [
      &quot;@storybook/addon-links&quot;,
      &quot;@storybook/addon-essentials&quot;,
      &quot;@etchteam/storybook-addon-css-variables-theme&quot;,
    ],
  
    webpackFinal: async (config, { configType }) =&gt; {
      // `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: /\.scss$/,
        use: [&quot;style-loader&quot;, &quot;css-loader&quot;, &quot;sass-loader&quot;],
        include: path.resolve(__dirname, &quot;../&quot;),
      });
  
      // Return the altered config
      return config;
    },
  };
  
  </code></pre>
  <p>This is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;vue-3-mb&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;,
      &quot;storybook&quot;: &quot;start-storybook -p 6006&quot;,
      &quot;build-storybook&quot;: &quot;build-storybook&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@etchteam/storybook-addon-css-variables-theme&quot;: &quot;^1.0.2&quot;,
      &quot;@tinymce/tinymce-vue&quot;: &quot;^3&quot;,
      &quot;@wiris/mathtype-tinymce5&quot;: &quot;^7.27.1&quot;,
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;phosphor-vue&quot;: &quot;^4.3.1&quot;,
      &quot;vue&quot;: &quot;^3.0.0&quot;,
      &quot;vue-router&quot;: &quot;^4.0.0-0&quot;,
      &quot;vuex&quot;: &quot;^4.0.0-0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.16.0&quot;,
      &quot;@storybook/addon-actions&quot;: &quot;^6.3.12&quot;,
      &quot;@storybook/addon-essentials&quot;: &quot;^6.3.12&quot;,
      &quot;@storybook/addon-links&quot;: &quot;^6.3.12&quot;,
      &quot;@storybook/addon-postcss&quot;: &quot;^2.0.0&quot;,
      &quot;@storybook/vue3&quot;: &quot;^6.3.12&quot;,
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-vuex&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0&quot;,
      &quot;@vue/eslint-config-prettier&quot;: &quot;^6.0.0&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.3&quot;,
      &quot;css-loader&quot;: &quot;^6.5.1&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.3.1&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.0.0&quot;,
      &quot;prettier&quot;: &quot;^2.2.1&quot;,
      &quot;sass&quot;: &quot;^1.26.5&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.2&quot;,
      &quot;style-loader&quot;: &quot;^3.3.1&quot;,
      &quot;vue-loader&quot;: &quot;^16.8.3&quot;
    }
  }
  </code></pre>
  <p>And this is the style tag of my component with error:</p>
  <pre><code>&lt;style scoped lang=&quot;scss&quot;&gt;
    .TinyMCE {
      .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
        color: $gray-dark !important;
        svg {
          fill: $gray-dark !important;
        }
      }
      .tox-tinymce {
        border: 1px solid $cinza-light !important;
        border-radius: $border-radius-1 !important;
      }
      .tox:not([dir=&quot;rtl&quot;]) .tox-toolbar__group:not(:last-of-type) {
        margin-right: 0.5rem;
        border-right: 0;
      }
      .tox-editor-header {
        background-color: $gray-subtle !important;
      }
      .tox-toolbar__primary {
        background-color: $gray-subtle !important;
        border-bottom: 1px solid $gray-light !important;
        background: $gray-subtle !important;
      }
      .mce-content-body &gt; p {
        font-family: &quot;Roboto&quot; !important;
      }
      button {
        .tox-icon {
          svg {
            fill: $gray-dark;
          }
          i {
            font-size: 1.5rem;
          }
        }
        &amp;:focus {
          svg {
            fill: $gray-dark;
          }
        }
      }
    }
  &lt;/style&gt;
  </code></pre>