The SXA CLI is a great tool for working with themes in Sitecore instances that use SXA. This tool was introduced in version 9.3 and has simplified and streamlined a lot of the tasks related to theme development!
I’m not entirely sure when this issue was introduced. I think I remember some of these symptoms in a 9.3 instance, but can’t verify that. However, when working with an upgraded 10.1 instance (existing themes were recreated during the upgrade, btw) we saw an issue where the CSS in the
pre-optimized-min.css file was being doubled up. It didn’t always happen, but it happened enough that we needed to track it down.
After a bunch of troubleshooting, we found that it only happened when using the
sxa watch * commands from the CLI. It didn’t happen when using any of the
sxa build or
sxa rebuild command variants. Ultimately, what’s happening is that the
sxa watch commands, in addition to creating all the individual
css files from the varioius
scss files, it creates a
styles.css file that is the concatenation of all the individual
css files. Then, when the optimizer runs to create the minized file, it runs against
styles/*.css. So, not only does it minify all the individual
css files, it also minifies the
styles.css file. When comparing the output in Beyone Compare, it’s quite obvious.
It’s also apparent in the file size of
The top file is one built with
sxa build *, and the bottom was built with
sxa watch *. So
Enough already, what’s the solution?
Again, we saw that ALL
css files in the
styles/ folder of the theme were being included for minification. So, the obvious question is, “Can we exclude that file??”
Why yes, you can! In the
<theme>/gulp/config.js file, look for the
css: section and add
!styles/styles.css to the
That’s it! Now, when running the
sxa watch * commands, the
pre-optimized-min.css file is built appropriately!
Hope this helps!
Happy Sitecore trails, my friend!