Meteor如何使用多个.less文件

Jos*_*itt 17 meteor

我试图在Meteor应用程序中使用两个.less文件.所有文件都在一个Meteor应用程序文件夹中.我有一个.less文件,定义了一般的UI外观

在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);
}
Run Code Online (Sandbox Code Playgroud)

在myapp.less

@import "ui";

html {
    min-height: 100%;
    min-width: 320px;
}

body {
  .ui-gradient-topdown(#000, #FFF);
}

#new_message_input {
  background: #F00; 
  overflow: scroll;
}
Run Code Online (Sandbox Code Playgroud)

但是,在Meteor提供的页面中,我得到:

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

  ... more stuff below ...
Run Code Online (Sandbox Code Playgroud)

myapp.less样式表是不是导入的?

我想要一个app .less文件,可以@import各种mixin .less文件.做这个的最好方式是什么?

Nem*_*o64 18

因为看起来这个问题仍然是最新的我试着回答它.

在较新版本的meteor中(从v0.7.1.1开始).lessimport已弃用.新的方式是.import.less.通往它的方法是:

// client/mixins.import.less

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}
Run Code Online (Sandbox Code Playgroud)

然后在你的样式表中@import你要使用你的mixins:

// 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);
}
Run Code Online (Sandbox Code Playgroud)