Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Meteor how to use multiple .less files

Tags:

meteor

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?

like image 390
Josh Petitt Avatar asked May 04 '12 03:05

Josh Petitt


2 Answers

From the Meteor Docs:

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

like image 20
Kevin Lamping Avatar answered Oct 09 '22 12:10

Kevin Lamping


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);
}
like image 162
Nemo64 Avatar answered Oct 09 '22 12:10

Nemo64