Question

在我目前的流星应用程序中，我已经在每个Controller（铁路由器）的一个文件中拆分了较少的声明。我有一个共同的文件 - 我在其中定义了一些mixins - 在每个less文件中导入。我的问题是在每个路由中多次导入类。

文件结构为：

mixins.import.less（新名称，参考http://docs.meteor.com/#less）

.grid-container {
    // something
}

postList.less

@import (once) url('/client/views/mixins.import.less');

postDetail.less

@import (once) url('/client/views/mixins.import.less');

然后在Chrome检查器中，我发现我在mixins.import.less中写的重复内容。是否有可能避免这种双重导入？

Answer 1

假设你在编译的css中至少需要一次mixin代码（可能没有，有些人只想把它们作为mixins，而不是css代码中的类），那么一定要把它设置为引入“mixins.import。少“自己归档。然后对于使用它的所有相关文件，执行以下操作：

“postList.less”，“postDetail.less”等。

@import (reference) url('/client/views/mixins.import.less');

The (reference) option has been available since LESS 1.5，并且只会引入用于LESS文件的参考代码，但不会输出任何css。

Answer 2

Meteor将css和js / html资源捆绑在一起作为生产中的单个css和单个js文件。

在开发过程中，它们是单独提供的，但仍然在同一时间，在初始页面加载期间（首次请求到服务器）

对于较少的文件，为每个文件创建一个css文件（在开发期间）。由于您正在导入，Meteor基本上做的是创建每个相应的css文件，每个文件都包含单独的导入。

当它们一起服务于客户端时（看一下生成的html的head部分），你最终得到了许多导入样式声明的副本。

因此，由于Meteor的捆绑行为，您可以将较少mixin的一个副本保存在less文件中，而不是导入，因为它们将以CSS形式提供给客户端。< / p>

此外，可以按照unofficial meteor faq：

中的说明欺骗Meteor

...您可以将要导入的较少文件的扩展名从.less更改为.lessimport，然后将@import file.less更改为@import file.lessimport。这将防止较少的编译器自动尝试独立编译所有导入文件，但仍允许您使用它们......