在Symfony框架中使用Stylify CSS

Symfony是一套可重用的PHP组件和PHP框架，用于构建Web应用、API、微服务和Web服务。

如何将Stylify CSS集成到Symfony框架中

下面的例子使用了symfony/skeleton，并根据入门教程，广告了一些 composer 包： twig, annotations, @symfony/webpack-encore。

首先，使用CLI安装@stylify/unplugin软件包：

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

现在在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' ] }],
	// 可选
	//编译器配置信息 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
	// 使用Stylify CSS插件
	.addPlugin(stylifyPlugin)
	.addStyleEntry('index', cssPath);

现在你可以在symfony应用程序中使用生成的bundle：

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