Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom less contained within media queries is not compiled #15206

Closed
JoshuaFlood opened this issue May 14, 2018 · 8 comments

Comments

@JoshuaFlood
Copy link

commented May 14, 2018

Developing a custom theme, I have created a file new_products.phtml which inherits styles from new_products.less, both stored within the Magento_Theme folder of my custom theme.
When writing styles in plain LESS or CSS, everything works fine, though this means, of course, that the default media queries will override any styles that I apply. However, when I attempt to include either the .media-width mixin, or use an @media query, the styles are not rendered.

Preconditions

  1. Magento 2.2.3
  2. Ubuntu 16.04 Server VM using VirtualBox with icewm window manager
  3. Apache 2.4
  4. MySQL 14.14
  5. PHP 7.0
  6. Custom theme, inheriting from Magento/blank

Steps to reproduce

1. Create the file vendor/theme/Magento_Theme/templates/html/new_products.phtml as follows:

<div class="new-products-banner-container">
    <div class="new-products-banner">
        <h1 class="new-products-banner-title">NEW RELEASES</h1>
    </div>
</div>
<?php echo $this->getLayout()
            ->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")
            ->setProductsCount("10")
            ->setTemplate("product/widget/new/content/new_grid.phtml")
            ->toHtml();
?>

2. Create the file vendor/theme/Magento_Theme/web/css/new_products.less as follows:

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .new-products-banner-container {
        width: 100%;
        height: 53px;
        z-index: 1;
    }
    .new-products-banner {
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }
    .new-products-banner-title {
      margin-bottom: 0;
    }
    .block-title {
      display: none;
    }
    .block-new-products {
      margin-top: 10px;
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .new-products-banner-container {
        width: 100%;
        height: 53px;
        z-index: 1;
    }
    .new-products-banner {
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }
    .new-products-banner-title {
      margin-bottom: 0;
      line-height: 2;
    }
    .block-title {
      display: none;
    }
    .block-new-products {
      margin-top: 10px;
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .new-products-banner-container {
        width: 100%;
        height: 53px;
        z-index: 1;
    }
    .new-products-banner {
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }
    .new-products-banner-title {
      margin-bottom: 0;
      line-height: 1.25;
    }
    .block-title {
      display: none;
    }
    .block-new-products {
      margin-top: 10px;
    }
}
  1. Run setup:upgrade and cache:flush

Expected result

  1. Styles should render on the frontend.

Actual result

  1. The default styles, inherited from Magento/blank are rendered, excluding the custom styles from the CSS entirely.

###Note:

I am aware that styles needn't be repeated for mobile/desktop views when they are included in the common view, however even these measures do not ensure that the CSS is rendered.

This issue has been raised as a question on the Magento Stack Exchange.

@JoshuaFlood

This comment has been minimized.

Copy link
Author

commented May 14, 2018

I will add that I have created a workaround, answered in the aforementioned stack exchange question. However, this is not proper usage of the magento framework and so I cannot close the issue, though maybe my answer will aid in troubleshooting this more quickly.

@JoshuaFlood

This comment has been minimized.

Copy link
Author

commented Aug 9, 2018

@engcom-backlog-nickolas As far as I can tell, this is still an issue for 2.2.5.

I need to do a bit of testing once I've got more time but, as far as I remember, everything works as expected when styles are written within a _module.less file, but the breakpoints fail wherever a custom file is included as per magento's documentation.

@engcom-backlog-nickolas

This comment has been minimized.

Copy link

commented Aug 10, 2018

Hello @JoshuaFlood, thank you for your report.
We've acknowledged the issue and added to our backlog.

@magudelo62

This comment has been minimized.

Copy link

commented Oct 8, 2018

Hello @JoshuaFlood,

The real problem is that "vendor/theme/Magento_Theme/web/css/new_products.less" file isn't load and compiled. The good way to import less files as Magento documentations recomend is: In _extend.less file #register the _new_products.less by adding the following code: @import '_new_products.less';

Look here the Magento documentation https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-guide/css_quick_guide_approach.html#structured_extend

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

commented Nov 14, 2018

Hi @suryakant-krish. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

  • 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

  • 2. Verify that the issue is reproducible on 2.3-develop branch

    Details- Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
    - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
    - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

  • 3. Verify that the issue is reproducible on 2.2-develop branch.

    Details- Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
    - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

  • 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

@suryakant-krish suryakant-krish removed their assignment Nov 16, 2018

@engcom-backlog-tomash engcom-backlog-tomash self-assigned this Jan 8, 2019

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

commented Jan 8, 2019

Hi @engcom-backlog-tomash. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

  • 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

  • 2. Verify that the issue is reproducible on 2.3-develop branch

    Details- Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
    - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
    - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

  • 3. Verify that the issue is reproducible on 2.2-develop branch.

    Details- Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
    - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

  • 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

commented Jan 9, 2019

Hi @engcom-backlog-nazar. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

  • 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

  • 2. Verify that the issue is reproducible on 2.3-develop branch

    Details- Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
    - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
    - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

  • 3. Verify that the issue is reproducible on 2.2-develop branch.

    Details- Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
    - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

  • 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

@engcom-backlog-nazar

This comment has been minimized.

Copy link
Contributor

commented Jan 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.