Discussion on: Storybook setup with Vite, Svelte Kit & Tailwind CSS

View post

Maarten Berkenbosch • Sep 20 '21 • Edited

Thanks a lot for sharing this info!
Does anyone know how to configure the storybook main.cjs file in order to make an alias work?
This is how I've set up an alias in vitejs

vite.config.cjs

export default defineConfig({
  plugins: [svelte()],
  server: {
    fs: {
      allow: ['..']
    }
  },
  resolve: {
    alias: [
      {
        find: '@',
        replacement: '/.../my-app/src',
      }
    ]
  },
  ...
})

Maarten Berkenbosch • Sep 20 '21

ah, found it:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf"
  ],
  "core": {
    "builder": "storybook-builder-vite"
  },
  "svelteOptions": {
    "preprocess": require("../svelte.config.cjs").preprocess
  },
  async viteFinal(config) {
    config.resolve.alias = {
      "@": "/.../my-app/src",
    };

    return config;
  }
}