How to use less mixins in meteor with @import and not get multiple definitions

in my current meteor app I have split the less declarations in one file per Controller (iron-router). I have a common file - where I have defined some mixins - which is imported in each less file. My problem is that the classes are imported multiple times in each route.

The file structure is:

mixins.import.less (new names, reference 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');

Then in the Chrome inspector I found duplicated everything I have written in mixins.import.less. Is it possible to avoid this double import?

Answers


Assuming you want the mixin code at least once in your compiled css (perhaps not, some just want them as mixins, not classes in the css code), then make sure you set it to bring in the "mixins.import.less" file all by itself. Then for all your dependent files using it, do this:

"postList.less", "postDetail.less", etc.

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

The (reference) option has been available since LESS 1.5, and will only bring in the code for reference purposes to be used in the LESS file, but will not itself output any css.


Meteor bundles css and js/html resources all together as a single css and a single js file in production.

In development, they are individually served, but still at the same time, during initial page load (first ever request to server)

For less files, a css file is created for each (during development). Since you are importing, what Meteor basically does is create each corresponding css file that each contain the import individually.

And when they are served to the client all together (take a look at the head section of the generated html), you end up with that many copies of the imported style declarations.

Therefore, due to this bundling behaviour of Meteor, you can just keep one copy of your less mixins in a less file, and not import at all, since they are going to be served to the client in CSS form anyway.

Also, it is possible to trick Meteor into bypassing as described in the unofficial meteor faq:

... you can change the extension of the less files to be imported from .less to .lessimport and then change your @import file.less to @import file.lessimport. This will prevent the less compiler from automatically trying to compile all your import files independently, yet still let you use them ...


Need Your Help

Can the initial image be adjusted in the Xamarin PhotoView component?

xamarin imageview xamarin.android android-photoview

I'm using the PhotoView component to zoom and pan an image in Android. However, when it first goes to the page where the image is, it is positioned in the top left corner and when I try to pan or z...

libpcap, payload offset 66 but sizeof(headers) + doff = 62

unix tcp network-programming libpcap packet-sniffers

I am spending my sunday on understanding packet sniffing with libpcap and I came so far that I can read packets and metadata. When I was checking my code by sniffing on some packets, I found that I...