Meteor如何使用多个.less文件_Meteor

Meteor如何使用多个.less文件

meteor

Meteor如何使用多个.less文件,meteor,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

我正在尝试在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);
}

在myapp.less中

@import "ui";

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

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

#new_message_input {
  background: #F00; 
  overflow: scroll;
}

然而，在Meteor提供的页面中，我得到：

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

  ... more stuff below ...


... 下面有更多内容。。。

myapp.less样式表是否未导入

我想要一个app.less文件，可以@import各种mixin.less文件。最好的方法是什么

我的目的是：

将所有较少的文件放在“客户端”文件夹中

Meteor编译它们，因此不需要导入语句

导入函数非常有效！变量破坏事物。

来自：

如果要@import文件，请将其扩展名设为.lessimport to 防止流星独立处理

因为这个问题似乎仍然是最新的，所以我试图回答它

在较新版本的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})";
}

然后@import它在您想要使用混音的样式表中：

// 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);
}

我没有足够的声誉给@EzRaM留下评论，作为流星初学者，我有点挣扎，我希望这能帮助其他人

在Meteor 1.6中，我希望包含myOwnMixins.less文件，以便从节点_模块@import另一个.less文件，我就是这样做的：

1） /client/myOwnMixins.less（无需重命名*.import.less）

2） /imports/ui/layout/MyHeader.js，无需导入/client/myOwnMixins.less文件，因为.less是由meteor编译的，默认包含，只需使用类名即可

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

右对齐

我不知道为什么第二个less文件无法加载。但是我在这里看到了关于如何导入原始文件的其他讨论->。请澄清“变量破坏事物”的含义。这里不起作用，我不能使用其他文件的混合，这些文件似乎彼此隔离

myapp.less:less编译器错误：.ui渐变自上而下未定义

Meteor 1.1中不起作用。改为使用“mymixins.import.less”文件，并显式地@import它，例如

@import../relative/path/mymixins.import.less

。这似乎是一个已知的错误，很快就会被修复。很高兴看到他们已经修复了它。之后，执行

导入“lessfile.lessimport”更正：“lessimport”被弃用，取而代之的是“import.less”
    <div className="right">Right Aligned</div>