Problem with scss in storybook with vite

[markAtAthena]

Vite and storybook both say that they handle scss files automatically as long as sass is part of the project. I've added sass to my package.json and run "pnpm i" so I know that isn't the issue.

Our source had imports in our scss files such as:

@include '~@company/package/foo/bar'

and that caused an error of

Error: Can't find stylesheet to import.

and so I changed them to:

@use '@company/package/foo/bar'

and that got me past that, but now it says:

Error: Missing "./foo/bar" specifier in "@company/package" package

Does anyone know what might be the solution to this?

My .storybook/main.ts is:

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  core: {
    builder: '@storybook/builder-vite',
  },
  async viteFinal(config) {
    // Merge custom configuration into the default config
    return mergeConfig(config, {
      // Add dependencies to pre-optimization
      optimizeDeps: {
        include: ['storybook-dark-mode'],
      },
    });
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

I'm using the latest react/vite/storybook/typescript

[chantastic]

does it work if you try the same with a relative path?