I seem to be having trouble properly setting up my frontend themes in Magento 2.3.3. We have three Magento 1.9 websites that we’re migrating into a single Magento Commerce Cloud installation.
I’d like to build on top of Luma, and much of the three sites will be the same (such as layout and basic styles) but each store has their own primary and secondary colors, etc. My hope is to build out the common styles and templates in the Parent Theme that overrides Luma, and then make child specific modifications within each child theme where needed. Unforunately I can’t seem to get it quite right so that the themes are properly inherting one another.
Here’s what I currently have configured, however it’s not inheriting; it’s overwriting. Please let me know if you need the contents of any of the other files, I tried to indicate what each of them contained within the tree example but it may not be entirely clear.
app/design/frontend/Vendor/
├── myParentDefaultTheme/
│ ├── media/
│ │ ├── preview.jpg
│ ├── web/
│ │ ├── images/
│ │ │ ├── logo.svg
│ │ ├── css/
│ │ │ ├── source/
│ │ │ │ ├── components/
│ │ │ │ │ ├── _form.less
│ │ │ │ │ ├── _header.less
│ │ │ │ │ ├── _footer_less
│ │ │ │ ├── _theme.less (copied from Luma)
│ │ │ │ ├── _extend-child.less (empty)
│ │ │ │ ├── _extend.less (contains @import '_extend-child.less';)
│ │ ├── fonts/
│ │ ├── js/
│ ├── registration.php
│ ├── theme.xml (with Magento/luma )
│ ├── composer.json
│ │
│ │
├── StoreOneChildTheme/
│ ├── media/
│ │ ├── preview.jpg
│ ├── web/
│ │ ├── images/
│ │ │ ├── logo.svg
│ │ ├── css/
│ │ │ ├── source/
│ │ │ │ ├── components/
│ │ │ │ │ ├── _footer_less
│ │ │ │ ├── _extend-child.less (contains @import 'components/_footer.less'; )
│ │ ├── fonts/
│ │ ├── js/
│ ├── registration.php
│ ├── theme.xml (with Vendor/myParentDefaultTheme )
│ ├── composer.json
│ │
│ │
├── StoreTwoChildTheme/
│ ├── media/
│ │ ├── preview.jpg
│ ├── web/
│ │ ├── images/
│ │ │ ├── logo.svg
│ │ ├── css/
│ │ │ ├── source/
│ │ │ │ ├── components/
│ │ │ │ │ ├── _footer_less
│ │ │ │ ├── _theme.less (copied from Luma)
│ │ │ │ ├── _extend-child.less (empty)
│ │ │ │ ├── _extend-child.less (contains @import 'components/_footer.less'; )
│ │ ├── fonts/
│ │ ├── js/
│ ├── registration.php
│ ├── theme.xml (with Vendor/myParentDefaultTheme )
│ ├── composer.json
│ │
│ │
├── StoreThreeChildTheme/
│ ├── media/
│ │ ├── preview.jpg
│ ├── web/
│ │ ├── images/
│ │ │ ├── logo.svg
│ │ ├── css/
│ │ │ ├── source/
│ │ │ │ ├── components/
│ │ │ │ │ ├── _footer_less
│ │ │ │ ├── _extend-child.less (contains @import 'components/_footer.less'; )
│ │ ├── fonts/
│ │ ├── js/
│ ├── registration.php
│ ├── theme.xml (with Vendor/myParentDefaultTheme )
│ ├── composer.json
The _footer.less file in the StoreThreeChildTheme overwrites the footer styles to only include the child and not the parent styles. If I remove the child’s _footer.less file, the parent styles are loaded.
How can I configure this correctly so that I can modify things in the StoreThreeChildTheme’s _footer.less file while also inheriting the parent styles?
_extend-child.less reference: https://github.com/magento/magento2/issues/8852
