[date] Storybook + vanilla extract 스타일 적용하기

컴포넌트에 vanilla extract 스타일을 적용하니까 스토리북에서 이렇게 에러가 발생했다.

vanilla extract를 알아먹을 수 있도록 애드온을 설치해주자.. 

 

---

https://storybook.js.org/recipes/@vanilla-extract/css

Storybook: Frontend workshop for UI development

일단 공식 문서를 보고 아래 플러그인을 설치했다. 

pnpm add -D @vanilla-extract/vite-plugin

설치 위치는 apps/storybook 디렉토리에서 위 명령어를 입력한다.

첨에 packages/ui에 설치했는데 나같은 실수하지 마시길 ..

 

이것만으로는 해결 되지 않고 추가적인 세팅이 필요했다.

 

stackblitz링크에서 예시 코드를 제공하는데 별 도움이 안됐다 ^^ 

 

한 줄기 빛

StoryBook📖 초기 세팅과 스토리 작성, 크로마틱 배포 자동화까지..

 

// apps/storybook/.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";

const config: StorybookConfig = {
  stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  typescript: {
    reactDocgen: "react-docgen",
    skipCompiler: true,
  },
  docs: {
    autodocs: true,
  },
  // 이부분 추가 !
  async viteFinal(config) {
    config.plugins = config.plugins || [];
    config.plugins.push(
      vanillaExtractPlugin({
        identifiers: ({ hash }) => `_${hash}`,
      })
    );
    return config;
  },
};

export default config;

 

따단 잘 작동한다. 🍀