cancel
Showing results for 
Search instead for 
Did you mean: 

Merging all css

SOLVED

Merging all css

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 Smiley Happy

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Merging all css

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.

View solution in original post

2 REPLIES 2

Re: Merging all css

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.

Re: Merging all css

ok, I thought that may be the only option but if I didn't ask then I'd always wonder.

Thanks Smiley Happy