Meteor comment faire pour utiliser plusieurs .moins de fichiers

Je suis en train d'utiliser les deux .moins de fichiers dans une application de Météore. Tous les fichiers sont dans un seul Météore dossier app. J'en ai un .moins fichier qui définit générale de l'INTERFACE utilisateur look-and-feel

Dans l'interface utilisateur.moins:

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

Dans myapp.moins

@import "ui";

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

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

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

Cependant, dans la page qui est servi par le Météore, j'obtiens:

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

  ... more stuff below ...

La myapp.moins de la feuille de style n'est pas importé?

Je veux avoir une application .moins fichier qui peut @import divers mixin .moins de fichiers. Quelle est la meilleure façon de le faire?

InformationsquelleAutor Josh Petitt | 2012-05-04
  1. 18

    Car il semble que cette question est toujours d'actualité j'ai essayer d'y répondre.

    Dans les versions plus récentes de meteor (à partir de la v0.7.1.1) .lessimport ai obsolète. La nouvelle façon de .import.less. Le chemin est:

    //client/mixins.import.less

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

    alors @import dans votre feuille de style que vous souhaitez utiliser votre mixin dans:

    //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);
}
    • C'est toujours la bonne réponse que de Meteor 1.1.
    InformationsquelleAutor Nemo64
  2. 4

    De la Meteor Docs:

    Si vous souhaitez @import d'un fichier, donnez-lui l'extension .lessimport à
    prévenir le Météore de la traiter de façon indépendante.

    • Bien que je n'arrive pas à obtenir ce travail moi-même... j'ai posté trop vite...
    • Semble être un bug connu qui sera corrigé bientôt github.com/meteor/meteor/issues/203
    • Cela fonctionne maintenant! Devrait être la bonne réponse.
    • Agréable de voir qu'ils ont fixé.
    • Après cela ne import "lessfile.lessimport";
    • Correction: "lessimport" a été dépréciée en faveur de "l'importation.moins"

    InformationsquelleAutor Kevin Lamping
  3. 3

    De ce que j'ai:

    Place tous les fichiers dans le "client" le dossier.

    Meteor compile, donc il n'est pas nécessaire pour les déclarations d'importation.

    L'importation de fonctions fonctionne très bien! Les Variables de casser des choses.

    • Pouvez-vous préciser ce que vous entendez par "Variables de casser des choses" pls.
    • Il ne fonctionne pas ici, je ne peux pas utiliser un mixin à partir d'un autre fichier, les fichiers semble être isolés les uns des autres. myapp.less: Less compiler error: .ui-gradient-topdown is undefined
    • Cela ne fonctionne pas dans le Météore 1.1. Utiliser à la place une "mymixins.l'importation.moins" du fichier, et @import de façon explicite, par exemple @import ../relative/path/mymixins.import.less.
    InformationsquelleAutor EzraM
  4. 1

    Je n'ai pas assez de réputation pour laisser un commentaire pour @EzRaM, et j'ai lutté un peu comme Meteor débutant, j'espère que cela aide quelqu'un d'autre.

    Dans le Météore de 1,6, je voulais inclure myOwnMixins.moins fichier à @importation d'un autre .moins de fichiers à partir d'un node_module, c'est ce que j'ai fait:

    1) /client/myOwnMixins.moins (pas besoin de renommer *.l'importation.moins)

        @import '/node_modules/antd/lib/style/themes/default.less';

    .right {
      float: right;
      height: 100%;
    }

    ... more less code ...

    2) /imports/ui/layout/MyHeader.js, pas besoin d'importer /client/myOwnMixins.moins de fichiers depuis .moins est compilé par meteor et inclus par défaut, utilisez simplement le nom de la classe.

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