CSS less.js 在 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3084892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
less.js not working in chrome
提问by Jiew Meng
I noticed that less.jsis working in firefox but not in Chrome, or is it because I made an error?
我注意到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%;
}
even if i try html { background: red; }it still does not work in chrome am i making a mistake somewhere?
即使我尝试html { background: red; }它仍然无法在 chrome 中工作我是不是在某个地方犯了错误？
回答by Lithium
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.
根据您提供的链接：如果您使用的是 Chrome，Less.js 浏览器脚本目前将无法工作，并且由于已知的 Chrome 问题，您的页面路径以“file:///”开头。
回答by Nathan Strutz
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:
Lithium 是正确的，加载本地 javascript 文件存在已知的 Chrome 问题。这是 Chrome 中的一项安全“功能”。我知道有两种解决方法：
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.
使用 Web 服务器开发本地项目。您可以非常轻松地安装和使用 Apache，但配置需要一些耐心。如果您使用的是 Windows，则可以安装 IIS。执行此操作时，不是双击 HTML 文件，而是从http://localhost/浏览到它
将命令行开关添加
-allow-file-access-from-files到您的快捷方式，Chrome 将允许您轻松加载 LESS.JS。
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.
我很想提及使用不同版本的 less 转换器，例如 rubylessc版本，或者 PHP 或 .NET 的端口之一，但是 less.js 是最新的，我认为您应该继续使用它。
回答by Nathan Strutz
In case anybody else ever needs a quick solution for this on Mac OS X (tested on Lion)
如果其他人需要在 Mac OS X 上快速解决这个问题（在 Lion 上测试）
"Walkthrough for dummies"
“傻瓜演练”
Special thxto Lithium, Nathan Strutz+ the guys from this post on Superuser
特别THX以锂，弥敦道Strutz+的球员，从这个职位上的超级用户
Create an AppleScript
创建 AppleScript
with following command
使用以下命令
do shell script "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome-allow-file-access-from-files"
Then save as Application
然后另存为应用程序
(I put this into my dock and added an alternative Chrome icon for fast access)
（我把它放到我的 Dock 中并添加了一个替代的 Chrome 图标以便快速访问）
IMPORTANT:Chrome needs to be closed in order for this script(App)to work.
重要提示：Chrome 需要关闭才能运行此脚本（应用程序）。
回答by Michael Johansen
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.
实际上，与公认的答案相反，这确实可以正常工作。我在 Chrome 19，Mac OS X 上，上下文是 Chrome 扩展。我遇到了同样的问题。我开始尝试用不同的方式来包含它，在 rel、type、href 等中切换文本。
This works, the key is href="css/styles.css (use .css, not .less):
这有效，关键是 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>
Styles are nicely applied and the JavaScript console in Chrome has the following to say (slightly stripped for clarity):
样式应用得很好，Chrome 中的 JavaScript 控制台有以下内容（为了清晰起见略有删减）：
less: parsed /css/styles.css successfully. less-1.3.0.min.js:8
less: css generated in 33ms
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.
我知道不应该使用编译的 CSS 客户端，但是在 Chrome 扩展的上下文中，除了常规 CSS (eww) 之外别无选择。您也不能从服务器请求样式表，因为客户端会不时脱机。
回答by Full-Stack Software Engineer
I recommend you to use a compiled vesionof the LESS file. You can do this for example in windows with WinLess or SimpLESS.
我建议您使用LESS 文件的编译版本。例如，您可以在带有 WinLess 或 SimpLESS 的 Windows 中执行此操作。
I'm using winless. It automatically compiles my .css files when I save my code.
我正在使用无赢。当我保存代码时，它会自动编译我的 .css 文件。
You also need to run your example on a webserver like IIS / tomcat / Jboss
您还需要在 IIS / tomcat / Jboss 等网络服务器上运行您的示例
I hope it helps
我希望它有帮助
回答by Claudio Oliva
Editing the link tag to something like this will make it work with any browser ONLYif you are not using Less syntax within the file:
仅当您不在文件中使用 Less 语法时，将链接标记编辑为这样的内容将使其适用于任何浏览器：
<link rel="stylesheet" type="text/less" href="css/styles.less" />
So why would you use a plain css in a less file? No idea, but just so you know.
那么为什么要在 less 文件中使用纯 css 呢？不知道，但只是让你知道。
回答by Davo Mkrtchyan
回答by Joshua Muheim
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.
我发现这个小应用程序对于规避 file:// 问题非常有用：Anvil for Mac。一分钟，它就可以通过像http://myapp.dev这样的 URL 启动并运行任意数量的站点。
