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?
- 🚀 Learn how to get started
- 🔌 Checkout @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away: