design-tokens.source.json not being created

[alfred1000351]

Hi I'm using 3.1.0 and storybook 8.5.2 I'm having an issue where the design-tokens.source.json is not being created. Not really sure if I'm doing something wrong on this or not

this is my tokens.css file

:root {
  /**
  * @tokens Colors Dark
  * @presenter Color
  */
  --colourTertiarry400: #8dd2bf;
  --colourTertiarry600: #5a9f8c;
  --colourTertiarry700: #437769;
  --colourTertiarry800: #2d5046;
  --colourTertiarry900: #162823;
  --colourTertiarryDefault: #70c7af;
  /* @tokens End */
}

and this is my main.js

import type { StorybookConfig } from "@storybook-vue/nuxt";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-designs",
    { name: 'storybook-design-token', options: { preserveCSSVars: true,
        designTokenGlob: "tokens.css",
      } }
  ],
  // features: {
  //   buildStoriesJson: true
  // },

  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: true,
  },
};
export default config;

[Foszcz]

I have the same issue but with storybook-design-token in 3.1.0 and storybook 8.6.4

http://localhost:6006/design-tokens.source.json
Request Method:
GET
Status Code:
404 Not Found

[clemcode]

Hi, I found a workaround by defining the publicDir property on your Vite config :

.storybook/main.ts

import { mergeConfig, defineConfig } from 'vite'

const config: StorybookConfig = {

  */ your config */
  
  async viteFinal(config) {
    return mergeConfig(config, defineConfig({
      publicDir: 'public'
    }))
  }
}