NuxtN
Nuxtβ€’3y ago
> Rodrigo

Extend vite bundle (add assets from storybook and respect storybook alias)

Hello everyone!! I have a new Nuxt 3 project where I use Storybook and Nuxt 3 but each one lives in his own workspace.

I created a module in my Storybook workspace where I import all components: 
// @ts-ignore
import { defineNuxtModule } from '@nuxt/kit'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'

const __dirname = dirname(fileURLToPath(import.meta.url))

export default defineNuxtModule({
  hooks: {
    'components:dirs' (dirs) {
      dirs.push({
        extensions: ['.vue'],
        path: join(__dirname, 'src/components'),
      })
    },
  },
})


Problem:
Some components import .scss files and inside those .scss files we have some things like this:

@import "@/assets/styles/foundations";

When I import this files in the Nuxt 3 workspace my "@" alias points to the workspace root dir which is different from my Storybook root dir.

When using storybook the import will look something like:
.../storybook/src/assets/styles/foundations
But when importing inside the nuxt 3 workspace:
.../nuxt3/assets/styles/foundations

I see 2 solutions for this:
Bundle the storybook package with my nuxt 3 workspace or just add the assets I need with some lifecycle hook?
Transpile all the alias to respect the workspace vite config?

I am having trouble to find a good solution.. Can you help me? πŸ™‚
Was this page helpful?