1

Unexpected behavior from magento after trying to make mycustomtheme with parent luma.

When I put _extend.less in incorrect location: app/design/frontend/mevendor/mycustomtheme/css/source (missing web folder before css), the ls from var/view_preprocessed/pub/static/frontend/mevendor/mycustomtheme/en_US contains:

Magento_AdvancedCheckout  Magento_GiftCardAccount                         Magento_Newsletter                  Magento_Sales
Magento_AdvancedSearch    Magento_GiftMessage                             Magento_PageBuilder                 Magento_SalesRule
Magento_Banner            Magento_GiftRegistry                            Magento_Paypal                      Magento_SendFriend
Magento_Bundle            Magento_GiftWrapping                            Magento_ProductVideo                Magento_Swatches
Magento_Catalog           Magento_GroupedProduct                          Magento_ReCaptchaCheckoutSalesRule  Magento_Theme
Magento_CatalogEvent      Magento_InstantPurchase                         Magento_ReCaptchaCustomer           Magento_Vault
Magento_CatalogSearch     Magento_InventoryConfigurableProductFrontendUi  Magento_ReCaptchaFrontendUi         Magento_VersionsCms
Magento_Checkout          Magento_InventoryInStorePickupFrontend          Magento_ReCaptchaNewsletter         Magento_Weee
Magento_Cms               Magento_Invitation                              Magento_ReCaptchaReview             Magento_Wishlist
Magento_Contact           Magento_LayeredNavigation                       Magento_ReCaptchaSendFriend         PayPal_Braintree
Magento_Customer          Magento_LoginAsCustomerFrontendUi               Magento_Reports                     css
Magento_CustomerBalance   Magento_Msrp                                    Magento_Review                      info.json
Magento_Downloadable      Magento_MultipleWishlist                        Magento_Reward                      js-translation.json
Magento_GiftCard          Magento_Multishipping                           Magento_Rma                         mage

The css/source folder above contains style-l.css and style-m.css. The css is not broken but conceivably the css in _extend.less is not being applied to the produced styling.

Whereas if I put the _extend.less in correct folder location: app/design/frontend/mevendor/mycustomtheme/web/css/source the ls output from var/view_preprocessed/pub/static/frontend/mevendor/mycustomtheme/en_US contains:

Magento_PageBuilder  css  info.json  js-translation.json  mage

The css/source folder above does NOT contain style-l.css and style-m.css & as a result everything is broken.

In both cases the _extend.less contains the following

body{background-color:yellow;}

I have repeatedly run the following to no avail

rm -rf /home/magento/pub/static/* /home/magento/var/view_preprocessed/* /home/magento/var/cache/*
cp /root/.htaccess /home/magento/pub/static/ 
#re-copying htaccess above to static folder just in case it got lost
magento cache:flush
magento setup:static-content:deploy -f
chown -R www-data:www-data /home/magento
chmod -R 777 /home/magento

Why is magento not compiling all the styles when I include _extend.less inside web/css/source for mycustomtheme? But when selecting Magento/luma from admin panel for the frontend everything works just fine.

raza19
  • 23
  • 4
  • Does it work correctly if you change the theme to luma? Did you add the required files to app/design/frontend/vendor/theme? composer.json, registration.php, theme.xml – Aaron Wang Nov 27 '23 at 15:02
  • when converted to luma it works fine. all files you mentioned are included in the customized theme. – raza19 Nov 29 '23 at 11:42

1 Answers1

0

I recommend considering the incorporation of a custom theme for your modifications.

For detailed guidance on overriding the Luma theme and resolving issues with styles not displaying correctly, you may find valuable insights in the following Magento Stack Exchange thread:

Override luma theme

Vikram Kumar
  • 741
  • 3
  • 17