17

Meteorアプリで2つの.lessファイルを使用しようとしています。すべてのファイルは単一のMeteorアプリフォルダーにあります。一般的なUIのルックアンドフィールを定義する.lessファイルが1つあります

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スタイルシートはインポートされませんか？

さまざまなミックスイン.lessファイルを@インポートできるアプリ.lessファイルが欲しいです。これを行うための最良の方法は何ですか？

4

4 に答える 4

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

次に、ミックスインを使用するスタイルシートに @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

Meteor Docsから:

ファイルを @import する場合は、拡張子 .lessimport を付けて、Meteor がファイルを個別に処理しないようにします。

于 2013-02-15T03:41:55.127 に答える
3

私が来たもの：

「client」フォルダにすべての少ないファイルを配置します。

Meteorはそれらをコンパイルするため、インポートステートメントは必要ありません。

関数のインポートはうまく機能します！変数は物事を壊します。

于 2012-08-29T15:55:16.457 に答える