title: storybook vue sass additionalData not working
body: <p>In my vue.config.js file contains (ref: <a href="https://austingil.com/global-sass-vue-project/" rel="nofollow noreferrer">https://austingil.com/global-sass-vue-project/</a>):</p>
  <pre><code>css: {
      loaderOptions: {
        sass: {
          additionalData: `
            @import &quot;@/storybook-components/src/styles/utils/_variables.scss&quot;;
            @import &quot;@/storybook-components/src/styles/utils/_shadowMixins.scss&quot;;
          `,
          implementation: require('sass')
        }
      }
    },
  </code></pre>
  <p>This allows me to use the sass variables within the vue components.</p>
  <p>We have a central and shared storybook library for common components that was working perfectly, but now we share the variables it fails.</p>
  <p>How can I share add the additionalData to the vue components in storybook? There is a vue.config file in the storybook project but I don't think it is being read...</p>
  <p>The <code>.storybook/main.js</code> looks like (following the guides):</p>
  <pre><code>const path = require('path');
  
  // Export a function. Accept the base config as the only param.
  module.exports = {
    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: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
  
      // Return the altered config
      return config;
    },
    typescript: {
      check: false,
      checkOptions: {},
      reactDocgen: 'react-docgen-typescript',
      reactDocgenTypescriptOptions: {
        shouldExtractLiteralValuesFromEnum: true,
        propFilter: (prop) =&gt; (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
      },
    },
    &quot;stories&quot;: [
      &quot;../src/**/*.stories.mdx&quot;,
      &quot;../src/**/*.stories.@(js|jsx|ts|tsx)&quot;
    ],
    &quot;addons&quot;: [
      &quot;@storybook/addon-links&quot;,
      &quot;@storybook/addon-essentials&quot;
    ],
    &quot;framework&quot;: &quot;@storybook/vue&quot;
  };
  
  </code></pre>
  <p>So I assume the additionalData is meant to be added to the webpack final section, I just cannot see how?</p>