在React.js中使用Stylify CSS

React.js是一个用于构建用户界面的JavaScript库。

Stylify可以通过各种方式与React.js一起使用：

• 使用Vite.js(这个例子)
• Next.js

在StackBlitz上试试吧

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

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

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

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

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

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { stylifyVite } from '@stylify/unplugin';

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

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

import './stylify.css';

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

配置

有很多的选项你可以配置：

• @stylify/unplugin
• 编译器配置