Uso de Stylify CSS con Vite.js

Vite.js es la próxima generación de herramientas de frontend y Assets Bundler.

Stylify puede integrarse en Vite.js utilizando @stylify/bundler.

Pruébalo en StackBlitz

Cómo integrar el CSS de Stylify en el Vite.js

El ejemplo de abajo funciona con la plantilla Vite. Sin embargo, puedes usar el ejemplo de abajo y configurarlo para Svelte, React, Vue, Angular, Lit y cualquier otro framework que desees.

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 { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{ files: ['./*'], outputFile: './stylify.css' }],
	// 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(({ mode }) => ({
	plugins: [stylifyPlugin],
}));

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

import './stylify.css';

Si ahora utilizas los comandos de Vite.js obtendrás el fichero stylify.css generado.