Lesscss no funciona

Tengo este código html:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet/less" type="text/css" href="1.less" />
    <script type="text/javascript" src="less-1.3.0.min.js"></script>


    <title></title>
</head>
<body>
    <div id="t1">t1</div>
    <div id="t2">t2</div>
</body>
</html>

y este es el 1.less :

.transition {
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.shadow {
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 10px #808080;
    -o-box-shadow: 0px 0px 10px #808080;
    -webkit-box-shadow: 0px 0px 10px #808080;
    box-shadow: 0px 0px 10px #808080;
}

    .shadow:hover {
        -moz-box-shadow: 0px 0px 10px #a5a5a5;
        -o-box-shadow: 0px 0px 10px #a5a5a5;
        -webkit-box-shadow: 0px 0px 10px #a5a5a5;
        box-shadow: 0px 0px 10px #a5a5a5;
    }


.radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

header {
    background-color: #e3ffe3;
}

#t1 {
    .shadow;
    .transition;
}

#t2 {
}

pero el estilo no funciona y no sé por qué. Utilicé la herramienta de inspección de elementos de Chrome y encontré esta excepción:

XMLHttpRequest cannot load file:///E:/Projects/Web/Less%20Learning/1.less. Cross origin requests are only supported for HTTP.
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

no se que significa Quiero saber como puedo solucionar mi problema.

preguntado el 28 de agosto de 12 a las 09:08

2 Respuestas

1. Usa un servidor web

En realidad, debe ejecutar un servidor web (wamp, nginx, apache) y realizar la solicitud de obtención a un URI en ese servidor, en lugar de realizar la solicitud de obtención a un archivo; por ejemplo, cambiar la línea:

$.get("E:/Projects/Web/Less Learning/1.less",

leer algo como:

$.get("http://localhost/Projects/Web/Less Learning/1.less",

...también cree nombres de archivo sin espacios para una mejor organización, ejemplo:

$.get("http://localhost/Projects/Web/assets/css/1.less",

y la página de solicitud inicial también debe realizarse a través de HTTP.

Es posible que también tenga que configurar allow_url_include = On en la configuración del servidor en php.ini, no suele ser el caso con nginx, etc.

2. Carpetas más limpias

En lugar de Projects / Web / Less Learning

Tratar, Projects / Web / Less

Y dentro de eso:

 /projects/web/less/assets/css/less.less
 /projects/web/less/assets/css/css.css
 /projects/web/less/assets/js/less-1.3.0.min.js
 /projects/web/less/index.html

Respondido 28 ago 12, 09:08

Si esta aplicación web de plataforma .net puede usar http://www.dotlesscss.org/.

Respondido 28 ago 12, 09:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.