Hi,
I'm looking at adding the Critical CSS task to my copy of Frontools (which I will submit when I'm done incase anyone else wants it). The issue I'm having is, I would like this task to run on all CSS used in my theme not just what is being compiled into styles.css
With the LESS theme everything got merged and minified into two stylesheets:
/pub/static/frontend/theme/default/en_GB/css/styles-l.min.css /pub/static/frontend/theme/default/en_GB/css/styles-m.min.css
And then these were the only two stylesheets linked to in the header.
Now, with the SASS theme, Frontools compiles, merges, minifies everything from my theme into:
/pub/static/frontend/theme/default/en_GB/css/styles.css
which is great! But when I view the source code I now have other css files from modules I'm using being linked to in the header as well. For example:
/pub/static/frontend/theme/default/en_GB/mage/calendar.css
What I would like to do is:
- Find a way to combine all of these css files into one scss or css file (whichever is more feasible).
- Run gulp release to make production ready and use nanocss to minify etc.
- Lastly, run my new task, criticalCSS, to identify what css in styles.css would be critical.
Is this possible? Or can Magento 2 do something like merging already and I have something set up wrong? The merging CSS option in the admin seems to have no affect.
Thanks in advance
Solved! Go to Solution.
I'm trying to not connect M2 with Frontools, so the idea to magically get all CSS files related to your theme isn't an option, b/c require to run PHP code or just assume "okay, I believe this code should be loaded inside my theme", which sucks.
IMO the only option is to move all code to SASS (you have to track and move them manually) and then generate critical path CSS based only on this code.
CSS merging works as expected, remember that it's not possible in developer mode and you have to run `setup:static-content:deploy` after changing this option.
I'm trying to not connect M2 with Frontools, so the idea to magically get all CSS files related to your theme isn't an option, b/c require to run PHP code or just assume "okay, I believe this code should be loaded inside my theme", which sucks.
IMO the only option is to move all code to SASS (you have to track and move them manually) and then generate critical path CSS based only on this code.
CSS merging works as expected, remember that it's not possible in developer mode and you have to run `setup:static-content:deploy` after changing this option.
ok, I thought that may be the only option but if I didn't ask then I'd always wonder.
Thanks