Nuxt•2y ago

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'),
      })
    },
  },
})

// @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? 🙂

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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