Question

这可能吗？

file1.less

@import "file2.less"
@import "file3.less"

.caller {
  .mixin();
  width:  @width;
  height: @height;
}
.something-with-a-background {
  background: url("@{images}/other-thing.png");
}

file2.less

@import "file3.less"
.mixin() {
  @width:  100%;
  @height: 200px;
  background: url("@{images}/white-sand.png");
}

file3.less

@images: "../img";

将这些编译成：

allFiles.less

// file3.less
@images: "../img";

// file2.less
.mixin() {
  @width:  100%;
  @height: 200px;
  background: url("@{images}/white-sand.png");
}

// file1.less
.caller {
  .mixin();
  width:  @width;
  height: @height;
}
.something-with-a-background {
  background: url("@{images}/other-thing.png");
}

我只希望输出是按照正确顺序连接在一起的文件，具体取决于@import语句。

我尝试做什么：我希望能够在dist目录中添加一个较少的文件，以便人们可以使用mixins / vars / etc.通过导入我的较少文件。但在开发过程中，我并不希望它们都在一个文件中。所以我需要一个能够为我解决导入的构建。

Answer 1

这不是必需的，因为您可以这样做：

allFiles.less

@import "file3.less"
@import "file2.less"
@import "file1.less"

对于任何想要做的人都会产生同样的影响：

@import "allFiles.less"

好像他们都在那个文件中。谢谢@JeffWhelpley！

将较少的文件转换为单个较少的文件

1 个答案: