17

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:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/ui.less.css">

  ... more stuff below ...

The myapp.less stylesheet is not imported?

I want to have an app .less file that can @import various mixin .less files. What is the best way to do this?

1

4 Answers 4

18

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);
}
0
4

From the Meteor Docs:

If you want to @import a file, give it the extension .lessimport to prevent Meteor from processing it independently.

4
3

What I've come to:

Place all less files in the "client" folder.

Meteor compiles them, therefore there's no need for import statements.

Importing functions works great! Variables break things.

3
  • Can you clarify what you mean by "Variables break things" pls. Oct 25, 2012 at 0:03
  • 8
    It doesn't work here, I can't use a mixin from another file, the files seems to be isolated from each other. myapp.less: Less compiler error: .ui-gradient-topdown is undefined
    – zVictor
    Nov 1, 2012 at 0:46
  • This doesn't work in Meteor 1.1. Use instead a "mymixins.import.less" file, and @import it explicitly, e.g. @import ../relative/path/mymixins.import.less. Aug 21, 2015 at 15:55
1

I don't have enough reputation to leave a comment for @EzRaM, and I struggled a bit as Meteor beginner, I hope this helps someone else.

In Meteor 1.6, I wanted to include myOwnMixins.less file to @import another .less file from a node_module, this is what I did:

1) /client/myOwnMixins.less (no need to rename *.import.less)

    @import '/node_modules/antd/lib/style/themes/default.less';

    .right {
      float: right;
      height: 100%;
    }

    ... more less code ...

2) /imports/ui/layout/MyHeader.js, no need to import /client/myOwnMixins.less files since .less is compiled by meteor and included per default, simple use the className.

    <div className="right">Right Aligned</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.