4

Current File Structure:

web
|-css
   |-custom-variables.less
   |-header.less
   |-main.less

In header.less

a{
    color: @primary-color;
}

In custom-variables.less

@primary-color: #004e99;

In main.less

@import 'custom-variables';
@import 'header';

When I compile the Less files using Grunt, it is working properly. But when I switch to production mode or use php bin/magento setup:static-content:deploy, I get this error:

[Magento\Framework\View\Asset\ContentProcessorException]                     
  Compilation from source:                                                     
  frontend/Custom/Theme/en_AU/css/header.less                           
  variable @primary-color is undefined in file ..../var/view_preprocessed/css/frontend/Custom/Theme/en_AU/css/header.less in header.less on line 10, column 10                              
  08|   }                                                                       
  09|   a{                                                                      
  10|       color: @primary-color;                                                 
  11|   }                                                                       
  12| }

Am I doing something wrong? Or there another way of importing less variables from another file?

3
  • You tried to change the order of files @import 'header'; @import 'custom-variables'; . Aug 2, 2016 at 12:26
  • No, I get the same error.
    – V.S
    Aug 3, 2016 at 4:06
  • 1
    Did you ever find a solution to this problem? I am experiencing the same thing.
    – deadfishli
    Apr 3, 2017 at 12:57

2 Answers 2

6

I know this is an old question, but I just found the answer.

Create partial files

The files that are imported in main.less should be renamed as:

web
|-css
    |-_custom-variables.less
    |-_header.less
    |-main.less

After learning SASS, I found about partials files (files that don't need to be separate css file but just be imported - link to Sass guide).

When I looked into the documentation at lesscss.org, I couldn't find anything related. So I just tested this out by renaming those files and adding an underscore(_) to the beginning and it works!!

Hope this helps somebody.

0

If your theme inherited from Blank or Luma, You can use default way to define or redefine variables.

To add custom variables use <Package>/<Theme>/web/css/source/_variables.less, to redefine UI library variables use <Package>/<Theme>/web/css/source/_theme.less or <Package>/<Theme>/web/css/source/lib/_<component>.less.

This files are included by default. It means that You don't need to use @import in your main.less.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.