requireJS et LESS

Question

J'utilise la version javascript côté client de LESS pour compiler moins de code, et j'aimerais continuer à l'utiliser même sur le site final en direct (je sais ... mauvaise forme, mais cela me donne la possibilité depermettre aux utilisateurs de personnaliser quelques variables de moins et d'avoir ce "thème" toute leur application à la volée, étant donné que c'est une application Web qui une fois chargée ne se rafraîchit jamais, je pense que la seconde supplémentaire de temps de chargement pour compiler le moins est acceptable).

J'utilise également requireJS.

La question est:

A) Comment puis-je demander à requireJS de charger moins de code?

B) Est-ce que less envoie des événements lorsque la compilation est terminée?et

C) Existe-t-il un moyen de déclencher less pour recompiler sur commande?

Merci.

Answer 1

J'ai utilisé le plugin de chargement de texte pour RequireJS pour charger le fichier .less sous forme de texte, puis créer unnew less.Parser instance pour analyser le texte, puis ajouter moi-même le texte de style:

(new less.Parser()).parse(lessText, function (err, css) {
  if (err) {
    if (typeof console !== 'undefined' && console.error) {
      console.error(err);
    }
  } else {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = css.toCSS();
  }
});

Vous pouvez adopter une approche similaire, mais attribuez un identifiant au nœud de style et supprimez cet identifiant, puis rajoutez un autre texte LESS analysé lorsque vous le souhaitez.

Une mise en garde: le plugin de texte ne peut charger des fichiers texte à la demande que lorsque le fichier texte est sur le même domaine que la page Web.Si vous utilisez l'optimiseur RequireJS, vous pouvez insérer le texte dans un fichier JS intégré et optimisé.

Answer 2

@jrburke: J'ai mis en place un plugin requirejs rapide basé sur votre code:

define({

    version: '0.1',

    load: function(name, req, onLoad, config) {

        req(['text!' + name, 'base/less'], function(lessText) {

            var styleElem;

            (new less.Parser()).parse(lessText, function (err, css) {
                if (err) {
                    if (typeof console !== 'undefined' && console.error) {
                        console.error(err);
                    }
                } else {
                    styleElem = document.createElement('style');
                    styleElem.type = 'text/css';

                    if (styleElem.styleSheet) 
                        styleElem.styleSheet.cssText = css.toCSS();
                    else 
                        styleElem.appendChild( document.createTextNode( css.toCSS() ) );

                    document.getElementsByTagName("head")[0].appendChild( styleElem );
                }

                onLoad(styleElem);
            });

        });     
    }

});

"base / less" pointe vers la source moins.Vous pouvez également le charger à l'avance et supposer que l'objet global less existe.Idéalement, j'aimerais tirer l'objet moins Parser dans ce plugin lui-même afin qu'il ne crée pas du tout de global.

En utilisant cela, je peux faire des choses comme:

require(['less!global.less'], function(elem) {

});

À ce stade, global.less a été analysé et ajouté à la page et renvoie un élément pointant vers l'élément de style au cas où je devrais le supprimer ou le modifier pour une raison quelconque.

Quelqu'un a-t-il des commentaires ou connaît-il une meilleure façon de procéder?

Acclamations

Answer 3

J'avais des problèmes avec le plugin @nicholas avec les importations.Je l'ai corrigé en ajoutant le chemin du fichier au chemin de recherche et en définissant le nom de fichier pour de meilleurs messages d'erreur:

// http://stackoverflow.com/questions/5889901/requirejs-and-less
// enables require(['share/less!whatever.less'], function(elem) {});
define({
    version: '0.1',
    load: function(name, req, onLoad, config) {
        req(['share/text!' + name, 'share/less-1.3.0'], function(lessText) {
            var styleElem;
            var parser = new(less.Parser)({
                filename: name,
                paths: [name.split('/').slice(0,-1).join('/') + '/'],
            });
            parser.parse(lessText, function (err, css) {
                if (err) {
                    if (typeof console !== 'undefined' && console.error) {
                        console.error(err);
                    }
                } else {
                    styleElem = document.createElement('style');
                    styleElem.type = 'text/css';

                    if (styleElem.styleSheet)
                        styleElem.styleSheet.cssText = css.toCSS();
                    else
                        styleElem.appendChild( document.createTextNode( css.toCSS() ) );

                    document.getElementsByTagName("head")[0].appendChild( styleElem );
                }
                onLoad(styleElem);
            });
        });
    }
});