Uso de Stylify CSS en Symfony Framework

Symfony es un conjunto de componentes PHP reutilizables y un framework PHP para construir aplicaciones web, APIs, microservicios y servicios web.

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

El siguiente ejemplo utiliza symfony/skeleton y anuncia algunos paquetes de Composer de acuerdo con el tutorial de introducción: twig, annotations, @symfony/webpack-encore.

Primero, instala el paquete @stylify/unplugin usando CLI:

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

Ahora añade la siguiente configuración en el webpack.config.js:

const Encore = require('@symfony/webpack-encore');
const { stylifyWebpack } = require('@stylify/unplugin');

const cssPath = './assets/styles/index.css';

const stylifyPlugin = stylifyWebpack({
	bundles: [{ outputFile: cssPath, files: [ './templates/**/*.html.twig' ] }],
	// 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: {},
		// ...
	}
});

Encore
	// Usar el plugin CSS de Stylify
	.addPlugin(stylifyPlugin)
	.addStyleEntry('index', cssPath);

Ahora puedes usar el bundle generado en la app symfony:

{{ encore_entry_link_tags('index.css') }}