基于url动态导入.less文件

时间:2015-07-20 07:44:21

标签: javascript

我有一个main.less文件,其中我有2个文件,我想基于网址加载2个,例如:

if url contain value=abc
@import 'test1.less';
if url contain value=xyz
@import 'test2.less';

我只使用Javascript,没有JQuery。

提前致谢。

2 个答案:

答案 0 :(得分:0)

Less预先编译你建议在运行时运行一些代码来更改预编译代码,这是不可能的,除非你使用它客户端在生产环境中会导致性能不佳和潜在的可靠性问题,请参阅http://lesscss.org/#client-side-usage

我建议你使用类似的编译CSS文件:

var = cssURL;
if(window.location.href =="www.someurl.com/home"){
   cssURL = "style1.css";
}else{
   cssURL = "style2.css";
}
var head = document.head, link = document.createElement('link')

link.type = 'text/css';
link.rel = 'stylesheet';
link.href = cssURL;

head.appendChild(link);

但如果您使用较少的客户端只需更改

link.rel = 'stylesheet/less';

答案 1 :(得分:0)

Thanks for ur help....I found a rather much better way...add a class to body tag and make these entries in main less file
.class1 {
  @import 'test1.less';
}
.class2 {
  @import 'test2.less';}

and then identify ur url and change class name

document.getElementsByTagName("body")[0].className="class2"

thats it