Question

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

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

variables.less有一些变量，如

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

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

我试过做一个@import＆＃34; grid＆＃34; @import＆＃34;按钮＆＃34;在main.less中，但是在grid.less

中编译样式时没有找到变量中定义的变量。

我的grid.less看起来像这样，

               @import variables.less
               @import mixins.less

               .grid {
                   padding-top: @padding-small;
                }

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

             @import variables
             @import mixins
             @import grid
             @import  button
            .body {
               padding-left: @padding-small;
             }

但这失败了我试过了， @import（参考）＆＃34;变量＆＃34; 在网格和button.less中，但编译失败。我怎么能编译网格和button.less和其他较少的文件到main.css而不必为每个较少的文件打扰变量或mixins导入？

Answer 1

@import variables.less应该做到这一点。由于使用次数较少lazy loading，导入variables.less的位置无关紧要。

命名空间可能是一个问题，来自http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors：

请注意，在命名空间内声明的变量将限定为该范围仅限名称空间，并且不会在范围之外通过用于引用mixin的语法相同（#Namespace＆gt; .mixin名）。因此，例如，您无法执行以下操作：（＃Namespace ＆GT; @此意志 - 不工作）。

如何将多个较少的文件输出到一个css文件中，该文件依赖于变量和mixin在一个单独的less文件中

1 个答案: