Show docs navigation

Symfony Framework integration

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/bundler package using NPM or Yarn:

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 layoutCssPath = './assets/styles/layout.css';
const homepageCssPath = './assets/styles/homepage.css';
// ...

const stylifyPlugin = webpackPlugin({
    transformIncludeFilter: (id) => id.endsWith('twig') || id.endsWith('php'),
    bundles: [
        { outputFile: layoutCssPath, files: [
            './templates/base.html.twig'
        ]},
        { outputFile: homepageCssPath, files: [
            './templates/homepage/homepage.html.twig'
        ]}
    ]
});

Encore
    // Use the Stylify plugin
    .addPlugin(stylifyPlugin)
    .addStyleEntry('layout', layoutCssPath)
    .addStyleEntry('homepage', homepageCssPath)
    // ...

module.exports = Encore.getWebpackConfig();

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

{{ encore_entry_link_tags('layout') }}

{{ encore_entry_link_tags('homepage') }}

Where to go next?

Edit this page on Github