requireJS 和 LESS

Question

我正在使用 LESS 的客户端 javascript 版本来编译更少的代码，并且希望在最终的实时站点上继续使用它（我知道......形式很糟糕，但它使我能够允许用户自定义一些 less 变量，并让整个应用程序动态地使用该“主题”，因为它是一个一旦加载就永远不会刷新的 Web 应用程序，我认为编译 less 的额外加载时间是可以接受的）。

我也在使用 requireJS。

问题是：

A）如何让 requireJS 加载更少的代码？

B) 编译完成后 less 会分派任何事件吗？ C

) 有没有办法触发 less 按命令重新编译？

谢谢。

Answer 1

我使用了 RequireJS 的 文本加载器插件 将 .less 文件作为文本加载，然后创建一个新的 less。解析器实例来解析文本，然后自己添加样式文本：

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

您可以采用类似的方法，但为样式节点提供一个 ID 并删除该 ID，然后在需要时添加回另一个重新解析的 LESS 文本。

需要注意的是：当文本文件与网页位于同一域时，文本插件只能按需加载文本文件。如果您使用 RequireJS 优化器，您可以将文本内联到构建的、优化的 JS 文件中。

Answer 2

@jrburke：我根据您的代码组合了一个快速的 requirejs 插件：

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”指向 less 源。您还可以提前加载它，并假设全局 less 对象存在。理想情况下，我想将 less Parser 对象拉入这个插件本身，这样它就不会创建全局的。

使用这个我可以做类似的事情：

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

});

此时，global.less已被解析并添加到页面中，并返回指向样式元素的elem，以防我因某种原因需要删除或修改它。

有人有任何意见或知道更好的方法吗？

干杯

Answer 3

我在导入 @nicholas 插件时遇到了问题。我通过将文件的路径添加到搜索路径来修复它，并设置文件名以获得更好的错误消息：

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