1。使用Web服务器

Question

我有这个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 {
}

但风格不起作用，我不知道为什么。我使用了chrome的inspect element工具，发现了这个异常：

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

我不知道这是什么意思。我想知道如何解决我的问题。

Answer 1

1。使用Web服务器

您需要实际运行Web服务器（wamp，nginx，apache），并对该服务器上的URI发出get请求，而不是向文件发出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进行。

您可能还必须在php.ini中的服务器配置中设置allow_url_include = On - 通常不会使用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

Answer 2

如果此.net平台Web应用程序可以使用http://www.dotlesscss.org/。

Lesscss不起作用

2 个答案:

1。使用Web服务器

2。清洁文件夹