Uso de Stylify CSS en React.js

React.js es una librería JavaScript para construir interfaces de usuario.

Stylify se puede utilizar con React.js de varias maneras:

• Con Vite.js (este ejemplo)
• Next.js

Pruébalo en StackBlitz

Cómo integrar el CSS de Stylify con React.js y Vite.js

El ejemplo de abajo funciona con la plantilla Vite - React.js. Sin embargo, puedes utilizar el ejemplo de abajo y configurarlo para Svelte, Vue y cualquier otro framework que utilices.

Primero, instala el paquete @stylify/unplugin usando NPM o Yarn:

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

A continuación añade la siguiente configuración en 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/**'] }],
	// Opcional
	// Información de configuración del compilador 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()]
});

Ahora puedes añadir la ruta al src/stylify.css generado en el archivo src/main.js:

import './stylify.css';

Ahora ejecuta yarn dev. Se generará el archivo src/stylify.css.

Configuración

Hay muchas opciones que puedes configurar:

• @stylify/unplugin
• Compiler config