Using SASS (indented syntax) in storybook - vue.js

Question

I am facing problems using SASS by it's indented syntax, since the documentation is only describing a way to configure storybook for sassy css syntax (which I don't want to use) - is there also a workaround for using the original SASS Syntax instead? I looked around the internet and could not find any information about that issue...
My current webpack/main.js config is looking like this (not working):
const path = require('path');
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['#storybook/addon-actions', '#storybook/addon-links'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
sassOptions: {
indentedSyntax: true
}
}
}
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};

Answer 1

Got it solved!
The problem was a conflict accured throught suing "indentedSyntax: true," which should only be used fpr older sass-loader versions (<8). Since I am using 8.x "indentedSyntax: true," should be placed within the sassOptions object...
Anyways, since I did not found any information related to that topic I will post the solution in here: Just add the webpack configuration to your .storybook/main.js, so you can use SASS within your storybook.
const path = require('path');
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['#storybook/addon-actions', '#storybook/addon-links'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
indentedSyntax: true
}
}
}
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};