storybook vue sass additionalData not working - vue.js

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"
};