在Vite.js中使用Stylify CSS

Vite.js是下一代的前端工具和资产捆绑器。

Stylify可以通过@stylify/bundler集成到Vite.js中。

在StackBlitz上试试吧

如何将Stylify的CSS集成到Vite.js中

下面的例子适用于Vite模板。但是你可以使用下面的例子，并为Svelte、React、Vue、Angular、Lit和其他任何你想要的框架配置它。

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

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

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

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{ files: ['./*'], outputFile: './stylify.css' }],
	// 可选
	//编译器配置信息 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(({ mode }) => ({
	plugins: [stylifyPlugin],
}));

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

import './stylify.css';

如果你现在使用Vite.js命令，你将得到生成的stylify.css文件。