compiling multiple less files into one fails to recognize variables from variables.less

Question

I have multiple less files where the structure is as follows

     LESS 
      variables.less
      mixins.less
      main.less
      grid.less
      button.less

variables.less has some variables such as

    @padding-small: 20px;
    @background-color: #fff;

Currently each of the less files compiles to its own css file. However i want all the less files to be compiled to main.css

I tried doing an @import "grid" @import "button" within main.less but it fails saying some variables defined in variables.less is not found while compiling styles in main.less

My main.less also has dependency on variables and mixin.less where i have teh imports specifed this way,

         @import variables
         @import mixins
         @import grid
         @import  button

I get errors saying variable @border-color is undefined.

My grunt file for compiling all the less filesinto one single main.css looks like this

     less: {
        development: {
            options: {
              compress: true,
              yuicompress: true,
              optimization: 2
           },
           files: {
             '<%= config.app %>/css/main.css': 'src/less/main.less'
           }
        }
    }

Please tell me if there is anything else that i should be doing here...

peterdotjs peterdotjs · Accepted Answer · 2015-03-12T00:26:42

You are on the right track:

In grid.less and in button.less you should include

@import 'variables.less';
@import 'mixins.less';

You want to make sure that any less file that you have should be able to compiled by itself (modular). It should already contain/import all the dependencies required.

In main.less should have the following:

@import 'grid.less';
@import 'button.less';

From the error it appears that you are missing a variable border-color. You should specify this in variables.less

compiling multiple less files into one fails to recognize variables from variables.less

1 Answers