less.js 在 Chrome 中不起作用
我注意到 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 中工作，我在某个地方犯了错误吗？
I noticed that less.js is working in firefox but not in Chrome, or is it because I made an error?
<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%;
}
even if i try html { background: red; } it still does not work in chrome am i making a mistake somewhere?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
从您提供的链接来看：如果您使用 Chrome，并且由于已知的 Chrome 问题，页面路径以“file:///”开头，则 Less.js 浏览器脚本目前将无法运行。
From the link you provided : Less.js browser script currently won’t work if you’re using Chrome and the path to your page starts with “file:///” due to a known Chrome issue.
Lithium 是正确的，Chrome 浏览器在加载本地 javascript 文件时存在一个已知问题。这是 Chrome 中的一项安全“功能”。据我所知，有两种解决方法：
使用 Web 服务器开发本地项目。您可以非常轻松地安装和使用 Apache，但配置需要一些耐心。如果您使用的是 Windows，则可以安装 IIS。当您执行此操作时，您将从 http://localhost/ 浏览到该文件，而不是双击 HTML 文件p>
将命令行开关
-allow-file-access-from-files添加到您的快捷方式中，Chrome 将允许您轻松加载 LESS.JS。我很想提到使用不同版本的 less 转换器，例如 ruby
lessc版本，或者 PHP 或 .NET 的端口之一，但 less.js 更最新，我认为你应该坚持下去。Lithium is correct, there is a known Chrome issue with loading local javascript files. This is a security "feature" in Chrome. There are two workarounds that I know of:
Develop your local projects with a web server. You can install and use Apache very easily, though configuring takes some patience. If you are on Windows, you may be able to install IIS. When you do this, instead of double-clicking an HTML file, you will browse to it from http://localhost/
Add the command-line switch
-allow-file-access-from-filesto your shortcut and Chrome will allow you to load LESS.JS without a fuss.I'm tempted to mention using a different version of the less converter, like the ruby
lesscversion, or one of the ports to PHP or .NET, but less.js is more current, and I think you should keep with it.如果其他人需要在 Mac OS X 上快速解决此问题（在 Lion 上测试）
“傻瓜演练”
特别感谢Lithium，Nathan Strutz + 来自的人这篇关于超级用户的文章
创建 AppleScript
使用以下命令
< img src="https://i.sstatic.net/uV5Vu.png" alt="AppleScript">
然后另存为应用程序
（我将其放入我的 Dock 中，并添加了一个替代 Chrome 图标以便快速访问）
重要：Chrome 需要关闭才能让此脚本（应用程序）正常工作。
In case anybody else ever needs a quick solution for this on Mac OS X (tested on Lion)
"Walkthrough for dummies"
Special thx to Lithium, Nathan Strutz + the guys from this post on Superuser
Create an AppleScript
with following command
Then save as Application
(I put this into my dock and added an alternative Chrome icon for fast access)
IMPORTANT: Chrome needs to be closed in order for this script(App) to work.
实际上，与公认的答案相反，这确实工作得很好。我使用的是 Chrome 19、Mac OS X，上下文是 Chrome 扩展。我遇到了同样的问题。我开始尝试不同的方式来包含它，切换 rel、type、href 等中的文本。
这有效，关键是 href="css/styles.css （使用 .css，而不是 .less）：
样式应用得很好，Chrome 中的 JavaScript 控制台有以下内容（稍微剥离一下）清晰度）：
我知道不应该使用编译的 CSS 客户端，但在 Chrome 扩展的上下文中，除了常规 CSS 之外别无选择（eww），因为您也无法从服务器请求样式表。客户端会时不时地离线。
Actually, contrary to the accepted answer this does work fine. I'm on Chrome 19, Mac OS X, context is a Chrome extension. I experienced the same issue. I started to experiment with different ways to include it, switching out text in the rel, type, href and so on.
This works, the key is href="css/styles.css (use .css, not .less):
Styles are nicely applied and the JavaScript console in Chrome has the following to say (slightly stripped for clarity):
I know one aren't supposed to use compiled CSS client side, but in the context of a Chrome Extension there is no alternative other than regular CSS (eww). You can't request the stylesheet from a server either because the client will be offline every now and then.
我建议您使用 LESS 文件的编译版本。例如，您可以在 Windows 中使用 WinLess 或 SimpLESS 执行此操作。
我用的是winless。当我保存代码时，它会自动编译我的 .css 文件。
您还需要在像 IIS / tomcat / Jboss 这样的网络服务器上运行您的示例
我希望它有帮助
I recommend you to use a compiled vesion of the LESS file. You can do this for example in windows with WinLess or SimpLESS.
I'm using winless. It automatically compiles my .css files when I save my code.
You also need to run your example on a webserver like IIS / tomcat / Jboss
I hope it helps
如果您不在文件中使用 Less 语法，则将链接标记编辑为类似的内容将使其适用于任何浏览器ONLY：
那么为什么要在 less 文件中使用纯 css 呢？不知道，但只是让你知道。
Editing the link tag to something like this will make it work with any browser ONLY if you are not using Less syntax within the file:
So why would you use a plain css in a less file? No idea, but just so you know.
我发现这个小应用程序对于规避 file:// 问题非常有用：Anvil for Mac。只需一分钟，它就会启动并通过 URL（例如 http://myapp.dev）运行任意数量的网站。
http://anvilformac.com/
I found this small app to be very useful to circumvent the file:// problem: Anvil for Mac. One minute and it's upp and running as many sites as you like through URL's like http://myapp.dev.
http://anvilformac.com/
如果你不想使用 -allow-file-access-from-files ，或者运行 wamp、lamp 等，你可以使用这个扩展，它对我帮助很大。
链接
If you don't want to use -allow-file-access-from-files , or run wamp, lamp, or etc. you can use this extension it helped me a lot.
the link