58

我注意到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 中工作我在某个地方犯了错误吗？

4

8 回答 8

62

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

于 2010-06-21T13:24:56.610 回答
50

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

  1. 使用 Web 服务器开发本地项目。您可以非常轻松地安装和使用 Apache，尽管配置需要一些耐心。如果您使用的是 Windows，则可以安装 IIS。执行此操作时，您无需双击 HTML 文件，而是从http://localhost/浏览到它

  2. 将命令行开关添加-allow-file-access-from-files到您的快捷方式中，Chrome 将允许您轻松加载 LESS.JS。

我很想提一下使用不同版本的 less 转换器，比如 rubylessc​​ 版本，或者 PHP 或 .NET 的其中一个端口，但 less.js 是最新的，我认为你应该继续使用它。

于 2011-09-08T15:47:01.410 回答
14

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

“假人演练”

特别感谢Lithium , Nathan Strutz + Superuser上这篇文章中的人

创建一个 AppleScript

苹果脚本编辑器

使用以下命令 

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

苹果脚本

然后另存为应用程序

另存为应用程序

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

添加到 Dock

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

于 2012-02-04T11:24:11.747 回答
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) 之外别无选择。您也不能从服务器请求样式表，因为客户端将不时离线。

于 2012-07-07T21:51:57.323 回答
3

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

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

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

我希望它有帮助

于 2012-08-28T22:43:49.263 回答
1

仅当您未在文件中使用 Less 语法时，将链接标记编辑为这样的内容才能使其与任何浏览器一起使用：

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

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

于 2014-01-29T19:19:27.777 回答
0

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

http://anvilformac.com/

于 2012-10-13T08:44:11.367 回答
0

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

于 2019-06-18T12:20:04.303 回答