less.js 在 chrome 中不起作用答案

【问题标题】：less.js not working in chromeless.js 在 chrome 中不起作用
【发布时间】：2011-03-06 07:42:37
【问题描述】：

我注意到less.js 在 Firefox 中运行但在 Chrome 中没有运行，还是因为我犯了一个错误？

<link rel="stylesheet/less" href="css/style.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

即使我尝试html { background: red; }，它仍然无法在 chrome 中运行，我在某处犯了错误吗？

【问题讨论】：

难道你的 CSS 不应该放在
不，它是指向 css 或（.less 文件）less.js info 的链接
我在 Firefox 和 Chrome 中检查了您的代码，它们都是最新的，并且都可以正常工作；我唯一注意到的是，在 Chrome 中，您的背景渐变是倒置的。您使用哪些版本？
哦，是的，我也有这个问题，因为我的语法错误，你应该使用background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
在此提醒其他任何人：我在我的网络主机的网络服务器上遇到了同样的错误。它错误地发送空响应，因为 .less 文件/mime 类型未知。配置 Web 服务器以正确提供 .less 文件修复了它。（这不是跨域请求，所有.js/.less 文件都来自同一个文件夹。）

标签： css google-chrome less

【解决方案1】：

从您提供的链接中：如果您使用的是 Chrome，并且由于已知的 Chrome 问题，您的页面路径以“file:///”开头，Less.js 浏览器脚本目前将无法运行。

【讨论】：

这显然也会影响 Safari 6.0 (8536.25)。
这可以通过使用 --disable-web-security & --allow-file-access-from-files 来解决吗？编辑：没关系，用这些参数试过了，它可以工作。啊！应该读到低 2 行 :)))
如果这个答案包含至少一种可能的解决方法，这个问题会更好！

【解决方案2】：

Lithium 是正确的，加载本地 javascript 文件时存在已知的 Chrome 问题。这是 Chrome 中的一项安全“功能”。我知道有两种解决方法：

使用 Web 服务器开发本地项目。您可以非常轻松地安装和使用 Apache，尽管配置需要一些耐心。如果您使用的是 Windows，则可以安装 IIS。执行此操作时，您无需双击 HTML 文件，而是从 http://localhost/
将命令行开关 -allow-file-access-from-files 添加到您的快捷方式中，Chrome 将允许您轻松加载 LESS.JS。

我很想提一下使用不同版本的 less 转换器，例如 ruby lessc 版本，或者 PHP 或 .NET 的其中一个端口，但 less.js 是最新的，我认为你应该坚持下去。

【讨论】：

阿米特 - 试试superuser.com/questions/16750/…
我所知道的启动本地 Web 服务器的最简单方法是在站点的根目录中执行 python -m SimpleHTTPServer。
我也推荐使用本地网络服务器。尝试将node.js 和Connect library's .static() method 用作simple dev web server for static material，以便能够使用less.js（并避免任何其他潜在的file:/// 怪异）。
是的，添加切换到快捷方式有效：在 Windows 中创建一个新快捷方式，右键单击 -> 属性并将其目标设置为：chrome.exe -allow-file-access-from-files，这是一个快速修复，但仍然推荐使用网络服务器跨度>

【解决方案3】：

如果其他人需要在 Mac OS X 上快速解决这个问题（在 Lion 上测试）

“假人演练”

特别感谢到Lithium，Nathan Strutz +来自this post on Superuser的人

创建一个 AppleScript

使用以下命令

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome-allow-file-access-from-files"

然后保存为应用程序

（我把它放到了我的 Dock 中，并添加了一个替代的 Chrome 图标以便快速访问）

重要提示：需要关闭 Chrome 才能使此脚本（应用程序）正常工作。

【讨论】：

我不断收到语法错误：应为“”但发现未知标记。有什么想法吗？？
反斜杠应该被转义。应该是do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome -allow-file-access-from-files"

【解决方案4】：

实际上，与公认的答案相反，这确实可以正常工作。我在 Chrome 19、Mac OS X 上，上下文是 Chrome 扩展。我遇到了同样的问题。我开始尝试不同的方式来包含它，切换 rel、type、href 等中的文本。

这行得通，关键是href="css/styles.css（使用.css，而不是.less）：

<link rel="stylesheet/less" type="text/css" href="css/styles.css" />
<script src="libs/less-1.3.0.min.js" type="text/javascript"></script>

样式应用得很好，Chrome 中的 JavaScript 控制台有以下说明（为清楚起见，略删）：

less: parsed /css/styles.css successfully. less-1.3.0.min.js:8
less: css generated in 33ms

我知道不应该使用已编译的 CSS 客户端，但在 Chrome 扩展的上下文中，除了常规 CSS (eww) 之外别无选择。您也不能从服务器请求样式表，因为客户端会时不时地离线。

【讨论】：

Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 给我。 :(
你是如何从 less 中获得这种冗长的？
当 Less 被包含在客户端时，我自动得到了详细信息。它可能已在较新版本的 Less 中被删除？（尚未测试。）
是的，它也对我有用，但它不是由 less 编译的。你是如何以及从哪里得到这个的

【解决方案5】：

我建议您使用 LESS 文件的编译版本。例如，您可以在带有 WinLess 或 SimpLESS 的窗口中执行此操作。

我正在使用 winless。当我保存我的代码时，它会自动编译我的 .css 文件。

您还需要在 IIS / tomcat / Jboss 等网络服务器上运行您的示例

希望对你有帮助

【讨论】：

【解决方案6】：

如果您没有在文件中使用 Less 语法，则将链接标记编辑为这样的内容将使其适用于任何浏览器仅：

<link rel="stylesheet" type="text/less" href="css/styles.less" />

那么为什么要在 less 文件中使用纯 css 呢？不知道，但只是让你知道。

【讨论】：

【解决方案7】：

我发现这个小应用程序对于规避 file:// 问题非常有用：Anvil for Mac。一分钟后，它就会通过http://myapp.dev 等 URL 启动并运行任意数量的网站。

http://anvilformac.com/

【讨论】：

【解决方案8】：

如果您不想使用 -allow-file-access-from-files 或运行 wamp、lamp 等，您可以使用此扩展程序，它对我有很大帮助。 the link

【讨论】：