Question

我正在为一所学校的项目工作，并希望使用较少的图书馆。我尝试了类似的东西 <link rel="stylesheet/less" type="text/css" href="style.less"> 但这没用，我得到了错误 XMLHttpRequest无法加载file:/// [..] /style.less. Cross origin requests are only supported for HTTP. 意思是我基本上需要为此实现运行服务器。但是，由于这应该是非技术类的独立项目，因此运行服务器是不可能的。所以，我的问题是：

如何在文档级别使用less，就像编写等效的CSS一样 <style>div{color:#F00}</style>？

搜索谷歌“文档级别较少”没有返回任何相关结果。

Answer 1

您无法在文档级别使用LESS。 Less是CSS的预编译器，因此您应该使用站点中的最终产品（css）。您不需要Web服务器在Web浏览器中显示html + css local。您可以编译LESS到CSS客户端（通过包含less.js）或服务器端，源代码捆绑编译器。另请阅读：Is there a way to bypass Javascript / jQuery's same origin policy for local access?

例如，当我从webbrowser中的本地文件加载它时，下面的文件也可以工作：

<html>
<head>
    <link rel="stylesheet" media="(max-width: 767px)" href="green.less" />
    <link rel="stylesheet" media="(min-width: 768px)" href="red.less" />
    <script type="text/javascript">less = { env: 'development' };</script>
    <script src="less.js" type="text/javascript"></script>
</head> 
<body>
<p>color this text</p>
</body>
</html>

<强>更新当你确定javascript工作并且less.js加载并且你仍然没有看到你的样式时，它们可能是你的LESS文件中的错误或拼写错误。如果出现错误，您的LESS文件将无法编译，因此它们将是任何CSS，您将看不到任何样式。默认情况下，less.js不会在浏览器中显示错误。将<script type="text/javascript">less = { env: 'development' };</script>添加到您的来源，以允许浏览器中显示LESS错误（来自：https://stackoverflow.com/a/11289000/1596547）。

示例：

enter image description here

文档级别更低

1 个答案: