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!
I believe you may have a misconfiguration of your gulp settings.
The styles.css file is a concatenation of a few Sass files that do not get pulled in via a component directly and otherwise need a representative in the /css folder to be added to the final minfiied pre-optimized-min.css file.
These are some examples of those styles:
These files can also be configured in your gulp configuration under the “sass” object.
Here is a screenshot of our configuration: https://i.imgur.com/VDl2c34.png
Your implementation may work as well, but I would double-check that you are not actually missing these generic styles in your output.
LikeLiked by 2 people
Ah, I see what you’re talking about now and now that `sass/styles` config section makes sense! In our custom themes, all of our custom sass files are at a single level and all base/dependent sass files are pulled in by other sass files.
Here is our relevant config section:
And now it makes sense why we’re getting the output we’re getting. This is probably worth some clarification in my post.
Thanks for pointing this out!
LikeLiked by 1 person