0

私はこの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>

そしてこれは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 {
}

しかし、スタイルが機能せず、理由がわかりません。私はクロムの要素検査ツールを使用し、この例外を見つけました：

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

どういう意味かわかりません。問題を解決するにはどうすればよいか知りたいです。

4

2 に答える 2

2

1.Webサーバーを使用する

実際にウェブサーバー（wamp、nginx、apache）を実行し、ファイルに対してGETリクエストを行うのではなく、そのサーバー上のURIに対してgetリクエストを行う必要があります。たとえば、行を変更します。

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

次のようなものを読むには：

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

...また、整理しやすくするために、スペースなしでファイル名を作成します。例：

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

また、最初のリクエストページもHTTP経由で作成する必要があります。

allow_url_include = Onphp.iniでサーバー構成を設定する必要がある場合もあります。通常、nginxなどの場合はそうではありません。

2.よりクリーンなフォルダ

それ以外のProjects / Web / Less Learning

試す、Projects / Web / Less

そしてその中：

 /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
于 2012-08-28T08:37:11.170 に答える
0

この.netプラットフォームWebアプリケーションの場合は、http：//www.dotlesscss.org/を使用できます。

于 2012-08-28T08:40:35.840 に答える