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.