在Svelte中使用Stylify CSS

Svelte是一种构建用户界面的全新方法。像React和Vue这样的传统框架的大部分工作都是在浏览器中完成的，而Svelte将这些工作转移到编译步骤中，在你构建应用程序时进行。

你可以将Stylify CSS与SvelteKit或与Vite + Svelte App一起使用。下面是两种情况的指南。

如何将Stylify CSS与SvelteKit整合在一起

在StackBlitz上试试吧

首先，使用NPM或Yarn安装@stylify/unplugin软件包：

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

接下来在vite.config.js中添加以下配置：

import { sveltekit } from '@sveltejs/kit/vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{
		outputFile: './src/stylify.css',
		files: ['./src/**/*.{svelte,html}'],
	}]
});

const config = {
	plugins: [
		stylifyPlugin,
		sveltekit(),
	]
};

export default config;

最后一步，创建src/routes/+layout.svelte，内容如下stylify.css：

<script>
	import '../stylify.css';
</script>

<slot />

如果你创建了更多的包，例如页面，你必须将这些生成的CSS文件的路径添加到正确的Svelte文件中。

现在运行yarn dev。src/stylify.css文件将被生成。

如何将Stylify的CSS与Svelte和Vite.js整合起来

在StackBlitz上试试吧

下面的例子适用于Vite - Svelte模板。然而，你可以使用下面的例子，并为React.js、Vue和你使用的任何其他框架进行配置。

首先，使用NPM或Yarn安装@stylify/unplugin软件包：

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

接下来在vite.config.js中添加以下配置：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.svelte'] }],
	// 可选
	// 编译器配置信息 https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

export default defineConfig({
	plugins: [stylifyPlugin, svelte()]
});

现在你可以将生成的src/stylify.css的路径添加到src/main.js文件中：

import './stylify.css';

现在运行yarn dev。src/stylify.css文件将被生成。

配置

有很多选项你可以配置：

• @stylify/unplugin
• 编译器配置

其他提示

如果你使用Stylify组的语法，如[h1,h2]{color:blue}，svelte将匹配{color作为变量。为了避免这种情况，请使用带有大括号和模板字面的语法来处理类属性：

class={` [h1,h2]{color:blue} `}