javascript - lesscss 不起作用

转载作者：行者123 更新时间：2023-12-02 19:25:04

25

4

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

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

最佳答案

1。使用网络服务器

您需要实际运行一个网络服务器(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/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

关于javascript - lesscss 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12155434/

25

4

0

文章推荐： javascript - 根据选定的下拉列表值创建动态复选框

文章推荐： docker - Docker在构建期间无法访问任何Internet URL

c# - DotLess LessCss 编译器与 WebEssentials LessCss 编译器不同
我正在使用 dotless 在运行时解析 LessCss。这基本上是成功的，但我遇到了一种情况，它没有按预期工作。给定以下 LessCss: @tileWidth: 50px; @tileMargi
java - org.apache.xmlgraphics fop + org.lesscss lesscss 冲突
我在 java 项目中使用两个包时发生冲突 - apache fop 和 lesscss。我找出了错误的原因 - less 编译器使用 context.setLanguageVersion(Conte
lesscss 导入和观察
我有两个文件:黑色.less /* imports */ @import "elements.less"; @import "crush.less"; @import "tree.less"; 我通过
javascript - lesscss 不起作用
我有这个 html 代码: t1 t2 这是1.less: .transition { -ms-transition: a
tinymce - LessCSS 中的自定义属性名称
我正在尝试在我的 TinyMCE 编辑器样式表中为 EPiServer CMS 项目实现自定义 CSS 属性。根据 EPiServer SDK，为了将自定义样式添加到 TinyMCE 样式下拉列表中
javascript - LessCSS 会导致页面加载滞后吗？
与 LessCSS需要在加载页面之前执行 JS，甚至在依赖大量流量的网站上使用这个库是个好主意吗？这似乎是执行 JS 的初始解析时间的一个坏主意，就像 CSS 在 JS 文件下载之前无法正确显示...
javascript - 渲染事件后的 LessCSS
我正在开发一个使用 LessCSS 生成样式表的网站。由于我的同事对 Ant 任务(Ant + Rhino + Less)或 NodeJS 知之甚少，我建立了一个可以在 CSS 和 LessCSS 之
javascript - Lesscss - 当数字没有单位时
如何检查一个数字是否没有单位？必须有比以下更短的方法: .margin(@i) when (isnumber(@i)) and not (ispixel(@i)) and not (ispercent
html - LESScss if 条件变量不为空
如果变量不等于 null，我将尝试为 div 添加字体系列。我的 less 代码是 div.content { & when (isstring(@contentFont)) { font
css - lesscss 如何转义括号
我有以下纯 CSS 规则: #cboxOverlay{ background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filte
html - LessCSS - 将颜色评估为内容的字符串
我确信这很简单，但我无法让它发挥作用。本质上，我正在构建一个风格指南，以使与设计师/开发人员的合作更容易一些。我想要完成的是这个，我有一个装满 block 的托盘，其背景颜色由 LESS 使用 mi
css - LESSCSS 转义过滤器
我需要我的 LESS 文件来编译以下过滤器: filter: url("data:image/svg+xml;utf8,#grayscale"); 我似乎无法找出正确的语法来转义它，因为 LESS 正
css - LessCSS 列表作为参数
我已经定义了: .box-shadow (@params) { -webkit-box-shadow : @params; -moz-box-shadow : @params;
css - LessCss - 匹配选择器的正确语法
我有以下代码，我将 main 用作扩展函数 .clear-left { > li:first-child { border-left:none; margin-
css - LESSCSS - 使用计算和返回值
你好，希望你能帮上忙。有没有办法让 LESS 只返回一个值 - 感觉我遗漏了一些非常明显的东西假设我有: @unit:em; @basevalue:1; 我可以用一些东西给我速记返回吗- .so
css - LessCSS 停止处理样式
我通过以下方式在 JS 模式 (less.js) 中使用 Less: 在一些页面浏览之后，它停止处理样式并提供一个“缓存”版本。为了让它重新解析样式，我必须清除浏览器 cookie。有谁知道这是为
symfony 2 lesscss 路径
我正在使用带有较少过滤器的 Assets 并将主要较少的文件存储在 app/Resources/... 我想从包中导入其他较少的样式表到该文件中。一切正常，但路径让我发疯。我的 base.less
less - 使用 LessCSS 的用户定义函数？
我最近刚刚进入 LessCSS，我遇到了我认为的主要限制，我想知道是否有办法做到这一点？我想说我在某个地方读到过 Sass 允许用户定义的函数，但 LessCSS 也会这样做吗？我想要做什么: @f
macos - Lesscss 命令行编译器 Lessc
嗨，我正在尝试在 Mac 上安装 LessCss 命令行编译器。我已经尝试过 brew install less Error: No available formula for less brew
grails lesscss-resources 插件问题
我在使用插件时遇到问题。一切似乎都很好，但在开发环境中运行应用程序后，页面加载但提示找不到编译的 css 文件。我正在使用 Grails 2.0.1 和 lesscss-resources 1.3.0

首页

博学

6Ren·AI

商城

javascript - lesscss 不起作用

1。使用网络服务器

2。更干净的文件夹