@storybook/preset-scss does not apply scss styling

[dbie999]

Summary

I can't get the storybook to show scss styling, I've tried everything (with and without @storybook/preset-scss), but it still doesn't work. Storybook doesn't complain, but the custom styling does not get applied. Most config options without @storybook/preset-scss resulted with a storybook error.

I have a react app, with webpack5, using scss&css. I have @storybook/preset-scss, sass, sass-loader, sty installed, with this config

"@storybook/addon-essentials": "^8.5.0",
"@storybook/addon-interactions": "^8.5.0",
"@storybook/addon-onboarding": "^8.5.0",
"@storybook/addon-webpack5-compiler-swc": "^2.0.0",
"@storybook/blocks": "^8.5.0",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^8.5.0",
"@storybook/react-webpack5": "^8.5.0",
    
"style-loader": "4.0.0",
"sass": "^1.81.0",
"sass-loader": "^16.0.4",
"css-loader": "6.11.0",

main.ts

const config: StorybookConfig = {
  addons: [
    '@storybook/addon-webpack5-compiler-swc',
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/preset-scss',
  ],
  core: {
    builder: 'webpack5',
  },
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../src/browser/storybook-utils/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1, // Ensure sass-loader runs before css-loader
          },
        },
        'sass-loader',
      ],
      include: path.resolve(path.dirname(import.meta.url), '../'),
    });

    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ];
    }
    return config;
  },
};
export default config;

any ideas what to do?

Additional information

No response

Create a reproduction

No response