I have created several mixins in my custom theme within the file "_mixins.less", these work locally and are loaded properly from my other less files. However, when I want to deploy static content I get the following compilation error:

Compilation from source: /var/projects/**project**/magento2/vendor/magento/theme-frontend-blank/web/css/email-fonts.less

Compilation from source: 
.anim-fade is undefined in /var/projects/**project**/magento2/var/view_preprocessed/css/frontend/GetNoticed/**project**/en_US/css/source/_theme.less

This only happens when it tries to compile less files from parent themes ( Luma or Blank ). I also get the same error in my Firebug console on the product page, within the gallery.css file.

The function .anim-fade doesn't do more than adding a simple transition effect:

.anim-fade(@element; @duration) {
  transition: @element ease-in-out @duration;
  -webkit-transition: @element ease-in-out @duration;
  -moz-transition: @element ease-in-out @duration;
  -o-transition: @element ease-in-out @duration;

Which works fine on all elements that use this. My _sources.less file looks like this:

@import '_mixins.less';
@import '_variables.less';
@import (reference) '_extends.less';
@import '_theme';
@import '_typography.less';
@import '_layout.less';
@import '_tables.less';
@import '_messages.less';
@import '_navigation.less';
@import '_tooltips.less';
@import '_loaders.less';
@import '_forms.less';
@import '_icons.less';
@import '_buttons.less';
@import '_sections.less';
@import '_pages.less'; // Theme pager
@import '_actions-toolbar.less';
@import '_breadcrumbs.less';
@import '_popups.less';
@import '_price.less';
@import '_bootstrap.less';
@import '_fonts.less'; /* theme fonts */
@import '_header.less'; /* theme heading */
@import '_homepage.less'; /* page specific styling */
@import '_checkout.less'; /* custom checkout styling */
@import '_productgrid.less'; /* products-grid search results */
@import '_product.less'; /* products-grid search results */
@import '_sidebar.less'; /* sidebars pages */

I'm absolutely clueless why it's doing this, all my other mixins are compiling just fine. I've tried renaming the mixin from "fade-transition" to "lib-fade-transition" to "anim-fade", but this didn't help.

Hoping to find answers here, thanks in advance!


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.