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

【问题标题】：How to output multiple less files into one css file which has dependency on variables and mixins in a separate less file如何将多个less文件输出到一个css文件中，该文件依赖于单独的less文件中的变量和mixin
【发布时间】：2015-02-22 23:48:14
【问题描述】：

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

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

variables.less 有一些变量如

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

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

我试着做一个@import "grid" @import "button" 在 main.less 中，但在 grid.less 中编译样式时无法找到 variables.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（参考）“变量” 在 grid 和 button.less 中，但编译失败。我怎样才能将 grid 和 button.less 以及其他 less 文件编译到 main.css 中，而不用担心每个 teh less 文件的变量或 mixins 导入？

【问题讨论】：

less: { development: { options: { compress: true, yuicompress: true, optimization: 2 }, files: [{ expand: true, cwd: 'src/less', src: [' *.less'], dest: '/css/', ext: '.css' }] } } 我的 gruntfile for less 看起来像这样
简而言之，要以这种方式获得main.css，您应该仅编译main.less，不要编译其他这些较少的文件。

标签： html css less

【解决方案1】：

@import variables.less 应该可以解决问题。因为 Less 使用 lazy loading，所以在哪里导入 variables.less 并不重要。

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

请注意，在命名空间中声明的变量的作用域是仅限命名空间，并且不会通过与引用 mixin 的语法相同（#Namespace > .mixin 名称）。因此，例如，您不能执行以下操作：(#Namespace > @this-will-not-work)。

【讨论】：