Symfony 6 - How to manage CSS in Symfony app using Webpack?

[@agravatvipul8101]

Good explation

[@JesusLazaro-vn8bx]

Hello Tania, thanks for the video. One question, do you know any plugin to insert inline Critical CSS and defer the rest of css that is not critical. Thank you!

[@tanyawebdev]

Yes, there are several plugins available for Symfony that can help with inserting inline critical CSS and deferring the rest of the CSS that is not critical. Here are a few popular ones: Symfony Critical CSS Bundle: This bundle provides a simple way to generate critical CSS for Symfony applications. It includes a command that extracts the critical CSS from your stylesheets and inserts it inline in the HTML document. Webpack Encore: This is a popular tool for managing assets in Symfony applications. It allows you to easily define entry points for your JavaScript and CSS files and then bundle and optimize them for production. Webpack Encore also provides a way to extract critical CSS and defer the rest of the CSS using the defer attribute. Assetic CriticalCssFilter: This is a filter for the Assetic asset management framework that can extract critical CSS from your stylesheets and insert it inline in the HTML document. It also provides an option to defer the rest of the CSS using the defer attribute. These are just a few examples of the plugins available for Symfony. You can explore other options by searching for "Symfony critical CSS" or "Symfony deferred CSS" on the web or on the Symfony community website.

[@JesusLazaro-vn8bx]

@@tanyawebdev Thanks for your reply!! Actually I am using webpack Encore to bundle all my assets but I could find anything related to critical CSS, would you mind to share with me those ways to extract critical CSS that you mentioned. Thanks very much once again I am very new at Symfony so I really appreciate your help :)

[@agravatvipul8101]

Can you help you when I used to asset function like Example {{asset(css/all.css)}} Then it was given error like

[@tanyawebdev]

Hello! Did you find a bug? Do you still need help? To be honest, I don't quite understand what's going on there. I can't say for sure without seeing the screenshot of the code and the error. If you still need help, add me to LinkedIn and send screenshots. Link to my profile in the channel description tab.

[@agravatvipul8101]

@@tanyawebdev okay good

[@agravatvipul8101]

​@@tanyawebdev hi issues is fixed issues is related to version so thanks for support me

[@agravatvipul8101]

Public/build/manifest.josn does not exits what was the issue