[Bug]: can't get scss to load despite storybook does not crash

[dbie999]

Describe the bug

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 show styling coming from scss files - it does work with inline styling.

Storybook doesn't complain. Most webpackFinal config options without @storybook/preset-scss resulted with a storybook error, complaining about scss characters.

I have a react app, with webpack5, using scss&css.

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

import './ModalContainerHeader.scss';

...

<div className="ModalContainerHeader">
      <div className="testOne" style={{ color: 'red' }}>
        Test
      </div>
      <div className="testTwo">Test</div>
    </div>

.ModalContainerHeader {
  .testTwo {
    color: red;
  }

any ideas what to do?

Reproduction link

can't share sorry

Reproduction steps

No response

System

worked ok

Additional context

No response

[valentinpalkovic]

Hi @dbie999

The @storybook/preset-scss doesn't sound familiar to me. To support SCSS in Webpack builder environments, I would rather suggest to use @storybook/addon-styling-webpack instead which is our recommended way of using SCSS in Storybook with Webpack.