🌟

SvelteKitでWindi CSSを使う

2021/05/15に公開

Svelte

SvelteKit

Windi CSS

tech

何かすごいらしい Windi CSS を SvelteKit で試してみたら、いくつか注意点があったので共有します。
（SvelteKit@1.0.0-next.359以降はほとんど癖なく Vite で使う方法をそのまま利用できます）

インストール

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

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

参考

svelte-add/windicss #1

windicss/svelte-windicss-preprocess #65

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

npm i -D vite-plugin-windicss windicss

設定

vite.config.js

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import WindiCSS from 'vite-plugin-windicss';

export default defineConfig({
  plugins: [sveltekit(), WindiCSS()],
});

>=SvelteKit@1.0.0-next.359

svelte.config.js

import WindiCSS from 'vite-plugin-windicss';

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

export default config;

参考: https://windicss.org/integrations/vite.html#sveltekit-as-of-1-0-0-next-102

css を読み込む

src/routes/+layout.svelte

<script>
  import 'virtual:windi.css';
</script>

参考

一部バージョンの違いで本記事と違いがあります。（記事作成時バージョン @sveltejs/kit@1.0.0-next.107）
2021/06/22 更新 vite-plugin-windicss@1.1.0 @sveltejs/kit@1.0.0-next.115 現在はほぼ公式ドキュメントと同じ手順で可能です
2022/09/23 更新 SvelteKit@1.0.0-next.359以降 vite.config.js に変わったため Vite で使う例をそのまま利用する
- (公式の Svelte のサンプルを利用しない)方法でうまくいきます（詳細は以下の別記事）

GitHubで編集を提案

インストール

設定

css を読み込む

参考

Discussion