<head> 部分中包含较少的 css 文件答案

【问题标题】：Less css file include in <head> section<head> 部分中包含较少的 css 文件
【发布时间】：2013-08-20 12:39:47
【问题描述】：

哪些文件需要包含在<head> 部分以减少css。在较少的官方网站上，我刚刚看到他们告诉包含 .less 和 .js 文件。但如果没有 .css 文件，它就无法工作。

【问题讨论】：

【解决方案1】：

参考 LESS 文档 (http://lesscss.org/#client-side-usage)：

链接您的 .less 样式表，并将 rel 设置为“stylesheet/less”：

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

然后从页面顶部下载less.js，并将其包含在页面的<head>元素中，如下所示：

<script src="less.js" type="text/javascript"></script>

确保在脚本之前包含样式表。

此方法将导致less-file充当常规css文件，因此不需要其他文件。

不过，这对于生产环境来说并不是一个好的做法。您应该将您的 less-file 编译为 css-file 并将其包含在您的 <head>-section 中，而不需要任何 less- 或 js-files。

【讨论】：

在 Windows 10 上本地运行，尝试上述方法会导致 Chrome 出现此错误：Failed to load file:///C:/Users/my_dir/my-theme.less: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https。

【解决方案2】：

@import "styles.less";

或

@import "styles";

它来自你的 CSS 文件.. 你只需要像这样包含它

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

【讨论】：

【解决方案3】：

这个帮了我...

<script src="less.js" type="text/javascript"></script>

我试图只使用这个

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

【讨论】：