Meteor how to use multiple .less files

Question

I am trying to use two .less files in a Meteor app. All files are in a single Meteor app folder. I have one .less file that defines general UI look-and-feel In ui.less: ``` .ui-gradient-topdown(@from, @to) { background-color: @from; /* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0% 0% 100%, from(@from), to(@to)); /* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, @from, @to); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, @from, @to); /* IE 10+ */ background-image: -ms-linear-gradient(top, @from, @to); /* Opera 11.10+ */ background-image: -o-linear-gradient(top, @from, @to); } ``` In myapp.less ``` @import "ui"; html { min-height: 100%; min-width: 320px; } body { .ui-gradient-topdown(#000, #FFF); } #new_message_input { background: #F00; overflow: scroll; } ``` However, in the page that is served up by Meteor, I get: ``` ... more…

Accepted Answer

Because it seems like this question is still current I try to answer it.

In newer versions of meteor (beginning with v0.7.1.1) `.lessimport` got deprecated. The new way is `.import.less`. The way to to it is:

```
// client/mixins.import.less

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}
```

then @import it in your stylesheet you want to use your mixins in:

```
// client/main.less

@import "mixins.import.less";
// relative to the current file
// if absolute it will be relative to your project root

.some-div {
  .opacity(0.5);
}
```

Meteor how to use multiple .less files

Solution

Problem

Related problems