如何在流星中使用较少的mixin和@import，而不获得多个定义

Question

在我当前的流星应用程序中，我将less声明拆分为每个控制器(iron路由器)一个文件。我有一个通用文件——我在其中定义了一些mixin——它被导入到每个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代码(也许不是，有些人只是希望它们作为mixin，而不是css代码中的类)，那么请确保将其设置为单独引入"mixins.import.less"文件。然后，对于所有使用它的依赖文件，请执行以下操作：

"postList.less"、"postDetail.less"等

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

(reference)选项自LESS 1.5以来一直可用，它只会引入LESS文件中使用的用于参考目的的代码，但本身不会输出任何css。

Answer 2

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

在开发过程中，它们是单独提供服务的，但在初始页面加载(有史以来第一次请求服务器)期间仍然是同时提供的

对于较少的文件，会为每个文件创建一个css文件(在开发过程中)。由于您正在导入，Meteor基本上所做的是创建每个相应的css文件，每个文件都单独包含导入。

当它们一起提供给客户端时(看看生成的html的头部分)，您最终会得到那么多导入样式声明的副本。

因此，由于Meteor的这种捆绑行为，您可以将较少的mixin的一个副本保存在较少的文件中，而根本不导入，因为它们无论如何都会以CSS形式提供给客户端。

此外，也有可能欺骗流星绕过非官方流星问答：

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