Using css-modules with vite and changing getLocalIdent

[paulm17]

Summary

I'm following

https://storybook.js.org/addons/storybook-css-modules

My complete main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import Unocss from "unocss/vite";
import { generateScopedName } from "hash-css-selector";

const { getLocalIdentName } = require("css-loader-shorter-classnames");
const getLocalIdent = getLocalIdentName();

const config: StorybookConfig = {
  stories: [
    "../../../packages/raikou/components/Badge/src/*.story.@(ts|tsx)",
  ],
  addons: [
    "storybook-dark-mode",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-styling",
    {
      name: "storybook-css-modules",
      options: {
        cssModulesLoaderOptions: {
          importLoaders: 1,
          modules: {
            getLocalIdent: generateScopedName, <-- doesn't work
            getLocalIdent, <-- doesn't work
            localIdentName: "[hash:base64:8]",  <-- doesn't work
          },
        },
      },
    },
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {
      builder: {
        viteConfigPath: ".storybook/customViteConfig.js",
      },
    },
  },
  typescript: {
    reactDocgen: false, // 👈 react-docgen configured here.
  },
  viteFinal(config) {
    config.plugins?.push(Unocss());
    return config;
  },
};
export default config;

Nothing I seem to try just ends up with the same default.

Any ideas? Thanks

Additional information

No response

Create a reproduction

No response

[paulm17]

Oh looking at the code for storybook-css-modules. Only webpack is supported. That's why it's not been run.

Alright will look for a vite solution then...

[paulm17]

Found the answer through this video:

https://www.youtube.com/watch?v=Sgcfiow4fVQ