requierejs y menos

Question

Estoy usando la versión JavaScript del lado del cliente de menos para compilar menos código, y me gustaría continuar usando esto incluso en el sitio en vivo final (lo sé ... mala forma, pero me da la capacidad de permitir a los usuarios a Personalice algunas variables menos y tenga ese "tema" toda su aplicación sobre la marcha, ya que es una aplicación web que una vez cargada nunca se actualiza, estoy pensando que el segundo tiempo adicional del tiempo de carga para compilar menos es aceptable).

También estoy usando requeríajs.

La pregunta es:

A) ¿Cómo consigo que las necesidadesjs cargan menos código?

B) ¿Menos despachan algún evento cuando se complete la compilación? y

C) ¿Hay alguna forma de activar menos para volver a compilar en el comando?

Gracias.

Answer 1

He usado el complemento de cargador de texto Para que los requisitos cargan el archivo .less como texto, luego cree una nueva instancia de Less. Parser para analizar el texto, luego agregue el texto de estilo:

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

Puede adoptar un enfoque similar, pero darle una identificación al nodo de estilo y eliminar esa identificación y luego agregar otro texto menos de lo que desee a pedido.

Una advertencia: el complemento de texto solo puede cargar archivos de texto a pedido cuando el archivo de texto está en el mismo dominio que la página web. Si usa el optimizador RequestJS, puede en línea el texto en un archivo JS construido y optimizado.

Answer 2

@Jrburke: He reunido un complemento Rapid RequitJS basado en su código:

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/menos" apunta a la fuente menos. También puede cargar esto con anticipación y asumir el global less El objeto existe. Idealmente, me gustaría atraer el objeto menos analizador a este complemento en sí para que no cree un global en absoluto.

Usando esto puedo hacer cosas como:

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

});

En ese momento, Global.less se ha analizado y agregado a la página y devuelve el elemento de estilo en caso de que necesite eliminarlo o modificarlo por alguna razón.

¿Alguien tiene alguna opinión o conoce una mejor manera de hacer esto?

Salud

Answer 3

Estaba teniendo problemas con el complemento @Nicholas con importaciones. Lo arreglé agregando la ruta del archivo a la ruta de búsqueda y establecí el nombre de archivo para mejores mensajes de error:

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