Show docs navigation

Using Stylify CSS in Symfony Framework

Integration example for the Symfony framework can be found in integrations examples repository .

How to integrate the Stylify into the Symfony Framework

The example bellow uses symfony/skeleton and ads a few composer packages according to the getting started tutorial: twig, annotations, @symfony/webpack-encore.

First install the @stylify/unplugin package using CLI:

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

Now add the following configuration into the webpack.config.js:

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

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

const stylifyPlugin = webpackPlugin({
    bundles: [{ outputFile: cssPath, files: [ './templates/**/*.html.twig' ] }],
    // Optional
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    }
});

Encore
    // Use the Stylify plugin
    .addPlugin(stylifyPlugin)
    .addStyleEntry('index', cssPath);

Now you can use the generated bundle in the symfony app:

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

Where to go next?

Edit this page on Github