通过Yepnope加载* .less css文件

时间:2012-03-10 14:38:28

标签: css less yepnope

我使用YepNope作为资源加载器,但我现在不得不支持Less文件,但我似乎无法加载这些文件,我读过:

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

但它并没有真正说明应该如何完成...我是否必须添加自定义过滤器或前缀!less然后手动将其写入DOM?

我基本上会做类似的事情:

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

1 个答案:

答案 0 :(得分:4)

这就是我的所作所为:

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

    return resourceObj;
}

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

然后,在你的加载语句中:

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

首先加载*.less个文件,然后使用LESS JavaScript处理它们。