storybook vue sass additionalData not working

Question

In my vue.config.js file contains (ref: https://austingil.com/global-sass-vue-project/):

css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/storybook-components/src/styles/utils/_variables.scss";
          @import "@/storybook-components/src/styles/utils/_shadowMixins.scss";
        `,
        implementation: require('sass')
      }
    }
  },

This allows me to use the sass variables within the vue components.

We have a central and shared storybook library for common components that was working perfectly, but now we share the variables it fails.

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...

The .storybook/main.js looks like (following the guides):

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  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: /\.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) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/vue"
};

So I assume the additionalData is meant to be added to the webpack final section, I just cannot see how?

Answer 1

As usual.. the rubber duck affect kicked in after posting the question. This was a very annoying one to resolve.

The following config worked for me, note the expansion of the rule for the sass-loader.

Additional note: webpack was fixed in the dev deps to "webpack":"^4.46.0"

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  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: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          // Compiles Sass to CSS
          loader: "sass-loader",
          options: {
            additionalData: `
              @import "./src/styles/utils/_variables.scss";
              @import "./src/styles/utils/_shadowMixins.scss";
            `,
            implementation: require('sass'),
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/vue"
};