What is meant by serving styles with the -s ./path parameter?

[john-melin]

Where do i configure this?

[gynekolog]

I don't know. But if you're looking for a solution how to make the addon work, you could use the staticDirs config in the main.ts file.

Usage:

root
 -public
 --theme-dark.css
 --theme-light.css

main.ts

import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "storybook-stylesheet-toggle", // this
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  staticDirs: ["../public"], // this
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};
export default config;

and the preview.ts:

import { type Preview } from "@storybook/react";

const preview: Preview = {
  // quick fix to make the storybook-stylesheet-toggle addon work
  globalTypes: {
    selectedStylesheetID: {},
  },

  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    stylesheetToggle: {
      stylesheets: [
        {
          id: "theme-dark",
          title: "Dark",
          url: "dark.css",
        },
        {
          id: "theme-light",
          title: "Light",
          url: "theme-light.css",
        },
      ],
    },
  },
};

export default preview;

You can see I add the

globalTypes: {
    selectedStylesheetID: {},
  },

It's because the addon doesn't work properly with the storybook 7.