Question

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

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

variables.less有一些变量，如

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

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

我尝试在main.less中执行@import“grid”@import“按钮”，但是在main.less中编译样式时，找不到变量中定义的变量。

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

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

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

我用于将所有较少文件编译到一个main.css中的grunt文件看起来像这样

     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文件都应该能够自行编译（模块化）。它应该已经包含/导入了所有必需的依赖项。

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

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

从错误中可以看出您缺少变量border-color。您应该在variables.less

中指定

将多个较少的文件编译成一个文件无法识别变量中的变量

1 个答案: