17

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

在 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 样式表？

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

4

4 回答 4

18

因为这个问题似乎仍然存在，所以我尝试回答它。

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

然后在你想要使用你的mixin的样式表中@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);
}
于 2014-05-07T20:30:50.740 回答
4

来自流星文档：

如果你想@import 一个文件，给它扩展名 .lessimport 以防止 Meteor 独立处理它。

于 2013-02-15T03:41:55.127 回答
3

我来了：

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

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

导入函数效果很好！变量会破坏事物。

于 2012-08-29T15:55:16.457 回答
1

我没有足够的声誉来为@EzRaM 发表评论，作为 Meteor 初学者，我有点挣扎，我希望这对其他人有所帮助。

在 Meteor 1.6 中，我想包含 myOwnMixins.less 文件以从 node_module @import 另一个 .less 文件，这就是我所做的：

1) /client/myOwnMixins.less (无需重命名*.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，不需要导入/client/myOwnMixins.less文件，因为.less是由meteor编译并默认包含的，只需使用className即可。

    <div className="right">Right Aligned</div>
于 2018-04-12T00:20:22.033 回答