Vanilla Extract環境設定 (Vite + Storybook7)

Vanilla Extract

パッケージのインストール

npm i @vanilla-extract/css
npm i @vanilla-extract/vite-plugin -D

設定ファイルに適用

storybook

.storybook/main.ts

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

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
+   viteFinal: async (config) => {
+     return mergeConfig(config, {
+       plugins: [vanillaExtractPlugin()],
+     });
+   }
};
export default config;

vite

vite.config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

// https://vitejs.dev/config/
export default defineConfig({
+  plugins: [react(), vanillaExtractPlugin()],
})

参考

• @vanilla-extract/vite-plugin
• Usage with storybook