Storybook build time is taking more than 10s after adding sass loader rule to webpackFinal

[hybrid smelt]

module.exports = {
stories: ['..//*.stories.mdx', '..//*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@hasty anchororybook/addon-links',
'@hasty anchororybook/addon-essentials',
'@hasty anchororybook/addon-interactions',
'storybook-addon-next-router',
],

framework: '@hasty anchororybook/react',
core: {
builder: {
name: 'webpack5',
options: {
fsCache: true,
},
},
},
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};

[pearl mountain]

adarsh#8815 has been warned

Reason: Mass mention

[hybrid smelt]

to give context i am using nextjs 12.2.5 and storybook 6.5.14

[light current]

I cannot answer your immediate question. However, there are two ways Storybook supports Next.js in a more complete manner:

If you're willing to upgrade to Storybook 7 beta, we recently announced a Next.js Storybook framework, which takes care of a ton of stuff (including Sass compilation) for you: https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

If you'd like to stay on 6.5.x, that framework was largely based on this addon, which does most of what the framework can do (including Sass compilation): https://storybook.js.org/addons/storybook-addon-next/

[hybrid smelt]

still taking too much time, there is this piece of code(placed in main.js file) without which npm run storybook fails to run with "WebpackOptionsValidation" error
core: {
builder: {
name: 'webpack5',
options: {
fsCache: true,
},
},
},

const path = require('path');

module.exports = {
stories: ['..//*.stories.mdx', '..//*.stories.@(js|jsx|ts|tsx)'],
addons: ['storybook-addon-next'],

framework: '@hasty anchororybook/react',
core: {
builder: {
name: 'webpack5',
options: {
fsCache: true,
},
},
},
};