かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

React TypeScript vanilla-extract を vite で使う時の Tips

React TypeScript で CSS in JS を書ける vanilla-extract を vite で使う時の Tips

ライブラリをインストールしただけだとエラーになる

$ npm i @vanilla-extract/css

ライブラリをインストールしただけ状態で style.css.ts のようなファイルを作成して使おうとしても下記のようなエラーになる
=> You may have created styles outside of a '.css.ts' context

拡張子 .css.ts を認識するためにプラグインが必要

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

プラグインの設定を vite.config.js に追加する

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

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

ちゃんと introduction の vite の項目に書いてあった…

おわり


cf.