通过Yepnope加载*.less css文件

Question

我使用YepNope作为资源加载器，但我现在必须支持更少的文件，但我似乎无法让它加载这些文件，我确实阅读了：

https://github.com/SlexAxton/yepnope.js/pull/64

但它并没有说应该怎么做……我是否必须添加一个自定义过滤器或带有!less的前缀，然后手动将其写出到DOM？

我基本上是这样做的：

yepnope("path/to/file.less")

Answer 1

下面是我要做的：

yepnope.addPrefix('less', function(resourceObj) {
    resourceObj.forceCSS = true;
    resourceObj.attrs = {
        'rel' : "stylesheet/less",
        'type': "text/css"
    };

    return resourceObj;
}

这将为任何以less!开头的URL创建一个yepnope前缀函数。该函数将强制它作为CSS加载，并将rel和type属性放在<link>元素中，这是LESS解析文件所必需的。请确保您使用的是yepnope或1.5+。

然后，在您的load语句中：

yepnope({
    load: [
        'less!path/to/file.less',
        'less!path/to/file2.less',
        ...
        'path/to/less.js'
    ]
});

它将首先加载您的*.less文件，然后使用较少的JavaScript处理它们。