Cargar less.js reglas dinámicamente

StackOverflow https://stackoverflow.com/questions/3175013

  •  02-10-2019
  •  | 
  •  

Pregunta

Estoy buscando en el uso de menos . js (se ve muy bien), pero nuestro sitio requiere que algunos estilos pueden cargar dinámicamente después de la carga de la página inicial. Parece, sin embargo, que todas las hojas de estilo MENOS deben cargarse antes de la carga less.js guión. es decir, funciona este 

<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

pero falla si las líneas son intercambiados alrededor, ni Firefox ni Chrome parecen intentar carga 'style.less' a menos que se ordenan correctamente. El requisito de pedido se señaló explícitamente en este tutorial .

¿Hay alguna manera de cargar menos hojas de estilo después de la carga de la página inicial?

Tenga en cuenta que este blog describe una característica de 'reloj' -

  

, que se auto-actualizar la CSS que siempre guardar su código MENOS

por lo que parece razonable esperar que yo podría añadir algunas reglas menos después de carga de la página. Se siente como que me falta algo.

Saludos,

Colin

ACTUALIZACIÓN: código utilizado para la prueba el comportamiento descrito en los comentarios (menos de hojas de estilo en la lista después del guión) - 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simple</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="/static/js/less-1.0.31.min.js"></script> 
  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="#abc">Bingo</div>
</body>

<script>
console.log("refreshing styles...");
less.sheets.push(document.getElementById('abc123'));
//var lessStyle = $("<style>#abc { color: blue; }</style>").attr("id", "less:static-less-style").attr("type", 'text/less');
//$("head").append(lessStyle);
less.refresh(true);
console.log("refreshed...");
</script>
</html>

y menos hoja de estilo 

@primary_color: green;

.rounded(@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;  
}

#container {
  background: @primary_color;
  .rounded(5px);

  div {
    color: red;
  }
}
¿Fue útil?

Solución

Yo sólo empujó 1.0.31 - tiene un método:. less.refreshStyles() que volver a compilar las etiquetas <style> con type="text/less" - probarlo y quiero saber si funciona

Otros consejos

Gracias por hacer esta pregunta - me ha ayudado mucho. Sólo estoy actualizando el tema con el fin de mostrar cómo lo hice para añadir dinámicamente un archivo CSS.

I utiliza la última versión inferior a (1.3.3). 

var stylesheetFile = 'file.css';
var link  = document.createElement('link');
link.rel  = "stylesheet";
link.type = "text/less";
link.href = stylesheetFile;
less.sheets.push(link);

less.refresh();

Puede utilizar este ligero (3k) biblioteca para carga perezosa menos / css y js archivos ( exención de responsabilidad: yo soy el autor)

.

Esto es tan simple como: 

lazy.load('/static/less/style.less');

También puede recibir una devolución de llamada, la carga de algunos activos más con dependencias y toma cuidado acerca de caché.

He encontrado una versión actualizada del guión que funciona a la perfección con el archivo MENOS: 

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>

En lugar utilizando 

less.refreshStyles()

uso 

less.refresh()
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top