svelte和windicss配置

在根据官方文档配置windicss的时候发现教程跟当前的svelte的版本不一样，所以自己尝试了一下并且做个记录。

"svelte": "^3.46.0"
"vite-plugin-windicss": "^1.8.6"

初始化svelte项目

npm create svelte my-app

安装windicss

npm i -D vite-plugin-windicss windicss

修改vite.config.js

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

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit(),WindiCSS()]
};

export default config;

在layout.svelte中添加代码

<script>
	import Header from '$lib/header/Header.svelte';
	import '../app.css';
	import 'virtual:windi.css'
</script>

官方文档：

https://kit.svelte.dev/docs/introduction

https://windicss.org/integrations/vite.html#install