Articles on: Magento 2 Pearl Theme User Guide

How LESS / CSS Generation works in Pearl Theme & Magento [developer corner]

Why LESS/CSS generation is needed

Short answer: performance & best practice.


Pearl Theme offers many admin options for functionality, layout, and design. Instead of piling overrides on top of Magento’s CSS (the Magento 1 way), Pearl reuses Magento variables and generates LESS dynamically from your admin settings so it can be merged with Magento’s own LESS before CSS is built. This avoids duplicate CSS and keeps output lean.



1) LESS generation in Pearl Theme


Some modules ship static LESS, while others regenerate LESS when options change.


CLI command: php bin/magento weltpixel:less:generate


Modules covered:

  • WeltPixel_FrontendOptions
  • WeltPixel_CustomFooter
  • WeltPixel_CustomHeader
  • WeltPixel_CategoryPage
  • WeltPixel_ProductPage
  • WeltPixel_DesignElements


Ways to trigger LESS generation

  1. SSH/CLI: run php bin/magento weltpixel:less:generate
  2. Save module settings in Admin: saving options for one of the modules above regenerates LESS for that module only (via system config observers).
  3. Cache Management: click Re-Generate Pearl Theme LESS/CSS.


Store-view specific LESS files created

  • Category Page: view/frontend/web/css/weltpixel_category_store_STORECODE.less
  • Product Page: view/frontend/web/css/weltpixel_product_store_STORECODE.less and view/frontend/web/css/source/_module.less
  • Custom Header: view/frontend/web/css/weltpixel_custom_header_STORECODE.less
  • Custom Footer: view/frontend/web/css/weltpixel_custom_footer_STORECODE.less
  • Frontend Options:

view/frontend/web/css/source/module/_store_STORECODE_extend.less and view/frontend/web/css/source/_extend.less


Notes

  • Product Page’s extra _module.less handles layout options (e.g., moving tabs); files are prefixed internally to target the correct store view only.
  • Frontend Options previously acted globally; now _extend.less is parsed per store view so settings don’t overwrite each other.
  • In multi-store setups Magento’s deploy path is like /pub/static/versionXXXX/frontend/Pearl/weltpixel_custom/LOCALE/css/styles-l.css (theme + locale). If multiple store views share the same theme and locale, use different child theme names or different locales. See: How to use Pearl Theme on multiple store views (inline link): https://support.weltpixel.com/hc/en-us/articles/115003645074-How-to-use-Pearl-Theme-on-multiple-store-views-Important-update-install-instructions
  • LESS inclusion is wired via a plugin on Magento\Framework\View\Page\Config\Reader\Head.
  • To add your own module into the LESS generation, implement the observer used on admin save and register it in di.xml inside the generationContainer argument. Example:


<type name="WeltPixel\Command\Console\Command\GenerateLessCommand">

<arguments>

<argument name="generationContainer" xsi:type="array">

<item name="WeltPixel_CategoryPage" xsi:type="object">

WeltPixel\CategoryPage\Observer\CategoryPageEditActionControllerSaveObserver

</item>

</argument>

</arguments>

</type>



2) CSS generation in Pearl Theme


CLI command (store-specific): php bin/magento weltpixel:css:generate --store=STORECODE


  • Works only for Pearl Theme and Pearl child themes.
  • Requires the store code; if Pearl isn’t active for that store, you’ll get an error.


What happens under the hood (GenerateCss → processContent)

  1. Deletes preprocessed LESS related to Magento and Pearl from var/view_preprocessed.
  2. Rebuilds CSS for the target store view and writes temporary files styles-l-temp.css and styles-m-temp.css that import the base styles-l.less and styles-m.less. These avoid downtime while the final CSS is compiling.
  3. Applies gzip compression and/or minification if enabled.



When to regenerate


  • After switching to Production Mode, run weltpixel:css:generate --store=... for every store view that uses Pearl (or use Cache Management → Re-Generate Pearl Theme LESS/CSS).
  • In Developer Mode, after changing admin options for any of the modules listed above, run the LESS/CSS regeneration so changes appear on the frontend.



Quick command recap (safe to copy)


  • Generate LESS for all relevant modules: php bin/magento weltpixel:less:generate
  • Generate CSS for a store view: php bin/magento weltpixel:css:generate --store=YOUR_STORE_CODE



By following this workflow you keep CSS output optimal, store-view specific, and consistent across deployments.

Updated on: 17/09/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!