2012-08-28 2 views
0

Je possède ce code html:Lesscss ne fonctionne pas

<!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> 

et c'est le 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 { 
} 

mais le style ne fonctionne pas et je ne sais pas pourquoi. J'inspecter outil élément chrome et trouvé cette exception:

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 

Je ne sais pas ce que cela signifie. Je veux savoir comment puis-je résoudre mon problème.

Répondre

2

1. Utilisez un serveur Web

Vous devez exécuter en fait un serveur Web (WAMP, nginx, apache) et faire la demande d'arriver à un URI sur ce serveur, plutôt que de faire la demande GET à un fichier; par exemple. changer la ligne:

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

lire quelque chose comme:

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

... aussi créer des noms de fichiers sans espaces pour une meilleure organisation, par exemple:

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

et la page de demande initiale doit également être fait sur HTTP.

Vous pouvez également avoir à mettre allow_url_include = On dans la configuration du serveur dans php.ini - généralement pas le cas avec nginx etc.

2. dossiers propres

Au lieu de Projects/Web/Less Learning

Essayez, Projects/Web/Less

Et à l'intérieur que:

/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 
+1

J'ai utilisé IIS et cela a fonctionné. Merci. –

+0

@ahmadalishafiee Aslm, votre bienvenue. – TheBlackBenzKid

0

Si cette application Web .net plate-forme, vous pouvez utiliser http://www.dotlesscss.org/.

+0

no. Ce n'est pas une application .net! –