🌟

SvelteKitでWindi CSSを使う

commits1 min read

何かすごいらしい Windi CSSSvelteKit で試してみたら、いくつか注意点があったので共有します。

インストール

SvelteKit は Vite 使ってるし Framework としては Svelte だし...と思ったけど Vite を選択するのが良いみたい。

image > https://windicss.org/guide/installation.html

参考

なのでvite-plugin-windicssをインストールします。

npm i -D vite-plugin-windicss windicss

設定

svelte.config.js
import WindiCSS from 'vite-plugin-windicss';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    vite: {
      plugins: [ WindiCSS.default() ]
    }
  }
};

export default config;

import WindiCSS from 'vite-plugin-windicss';だとモジュールの解決周りの影響で cjs が読み込まれてしまうので直接 mjs をインポートしています。
v1 から必要なくなりました。しかし.default が必要です。

css を読み込む

src/routes/__layout.svelte
<script>
  import 'virtual:windi.css';
</script>

参考

https://windicss.org/integrations/vite.html#sveltekit-as-of-1-0-0-next-100
  • 一部バージョンの違いで本記事と違いがあります。(記事作成時バージョン @sveltejs/kit@1.0.0-next.107)
  • 2021/06/22 更新 vite-plugin-windicss@1.1.0 @sveltejs/kit@1.0.0-next.115 現在はほぼ公式と同じです
GitHubで編集を提案

Discussion

ログインするとコメントできます