Uso de Stylify CSS en Laravel Framework

Accesos directos:Cómo integrar el CSS de Stylify en el framework Laravel.Para versiones antiguas de Laravel con Webpack

Laravel es un framework de aplicaciones web PHP con una sintaxis expresiva y elegante.

Stylify se puede integrar en Laravel utilizando el plugin Stylify CSS Vite.

Ejemplo de integración para el framework Laravel se puede encontrar en repositorio de ejemplos de integración.

Cómo integrar el CSS de Stylify en el framework Laravel.

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

Abre el vite.config.js y añade el plugin CSS de Stylify:

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

const stylifyPlugin = stylifyVite({
	bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],
	// Opcional - https://stylifycss.com/en/docs/unplugin
	compiler: {},
});

export default defineConfig(({ mode }) => ({
	plugins: [
		stylifyPlugin,
		laravel({
			// Añadir ruta a los archivos generados
			input: ['resources/js/app.js', 'resources/css/stylify.css'],
			refresh: true,
		}),
	],
}));

Añade la ruta a resources/css/stylify.css en la plantilla:

<head>
	@vite('resources/css/stylify.css')
</head>

Ahora cuando ejecutes el comando dev en package.json, el CSS será generado. Cuando ejecutes build, el CSS también será modificado.

Para versiones antiguas de Laravel con Webpack

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 el plugin CSS de Stylify en el webpack.mix.js:

const { stylifyWebpack } = require('@stylify/unplugin');

const stylifyPlugin = stylifyWebpack({
	bundles: [{
		outputFile: './resources/css/homepage.css',
		files: ['./resources/views/welcome.blade.php']
	}],
	// 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: {},
		// ...
	}
});

mix.webpackConfig({
	mode: 'development',
	plugins: [stylifyPlugin]
});

Ahora puedes usar los comandos para laravel mix.

¿Y ahora qué?

🚀 Aprende cómo empezar
🔌 Echa un vistazo a configuración de @stylify/unplugin
⚙️ O configura Stylify directamente: