Storybook with Nextjs 14.0.4 , styled-jsx, Sass and webpack 5

[tanwarvinay]

Summary

Integrate Sass loaders and styles jsx with storybook.

Hi, I have a Nextjs 14 app, and i am using styles-jsx and sass.
i am getting the following error while running storybook.

ERROR in ./sass/global.scss?type=global (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[13].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/@storybook/nextjs/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[13].use[4]!./node_modules/styled-jsx/dist/webpack/index.js??ruleSet[1].rules[17].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[17].use[1]!./sass/global.scss?type=global)
Module build failed (from ./node_modules/@storybook/nextjs/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ import css from 'styled-jsx/css';
  │                                 ^
  ╵
  sass/global.scss 1:33  root stylesheet

I think my config file is totally wrong here. But, if i only use default config file , then i am getting undefined variable $IMAGE_HOST error, i want to pass $IMAGE_HOST as additional data to all the .scss files.

Additional information

i have following configs as follows

//  ./main.js

const config = {
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-styling-webpack'
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  staticDirs: ['../public'],
  babel: async (options) => {
    return {
      ...options,
      presets: [
        [
          'next/babel',
          {
            'styled-jsx': {
              plugins: ['@styled-jsx/plugin-sass']
            }
          }
        ]
      ],
      plugins: [
        [
          'module-resolver',
          {
            root: ['.'],
            alias: {
              '~': './',
              public: './public'
            },
            extensions: ['.js', '.jsx']
          }
        ],
        'macros'
      ]
    };
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(css|scss)$/,
      use: [
        {
          loader: require('styled-jsx/webpack').loader,
          options: {
            type: (_fileName, options) => options.query.type || 'scoped'
          }
        },
        {
          loader: 'sass-loader',
          options: {
            additionalData: `$IMAGE_HOST: "image-host-dummy-name";`
          }
        }
      ]
    });
    return config;
  }
};
export default config;

// ./preview.js

import globalThemeStyles from '~/sass/global.scss?type=global';

const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i
      }
    }
  }
};

export default preview;

Create a reproduction

No response