将多个 less 文件编译成一个无法识别来自 variables.less 的变量

Question

我有多个less文件，结构如下

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

variables.less有一些变量如

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

目前，每个 less 文件都编译成自己的 css 文件。但是我希望将所有 less 文件编译为 main.css

我尝试在 main.less 中执行 @import "grid" @import "button" 但它失败了，说在 variables.less 中编译样式时找不到 variables.less 中定义的某些变量 main.less

我的 main.less 也依赖于变量和 mixin.less 我以这种方式指定了导入，

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

我收到错误消息说变量@border-color 未定义。

我将所有 less 文件编译成一个文件的 grunt 文件 main.css 看起来像这样

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

请告诉我是否还有什么我应该在这里做的...

Answer 1

你走在正确的轨道上：

在 grid.less 和 button.less 中你应该包括

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

您想确保您拥有的任何 less 文件应该能够自行编译（模块化）。它应该已经 contain/import 所需的所有依赖项。

在main.less中应该有以下内容：

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

从错误来看，您似乎缺少一个变量 border-color。您应该在 variables.less

中指定

将多个 less 文件编译成一个无法识别来自 variables.less 的变量

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

css

less

gruntjs