为什么我不能将 .less 文件导入单个 .less 文件？答案

【问题标题】：Why can't I import .less files into a single .less file?为什么我不能将 .less 文件导入单个 .less 文件？
【发布时间】：2011-07-25 09:18:56
【问题描述】：

我的文件结构如下：

lib/css/... 包含我的样式，这些样式分为每种区域的单个 .less 文件。

lib/style.less 是我想要将子样式文件收集到的文件 - 以及我想要链接到 HTML 中的文件。

当我输入（style.less）时：

@import url("/css/StyleToImport.less");

或

@import "/css/StyleToImport.less";

...我收到语法错误。

真的不能将.less文件合并成一个文件吗？

拥有一个包含颜色、尺寸等所有变量的单个文件可能真的很方便。

但就像现在一样，我必须在 HTML 中对每个文件使用 <link ...> 标记 - 这不太方便。

我已经读过这个：

正在导入

导入效果很好正如预期的那样。您可以导入 .less 文件，并且其中的所有变量都将能得到的。如果文件是 .less，扩展是可选的：

@import "库";

@import "typo.css";

【问题讨论】：

你能发布你遇到的错误吗？
第 1 行语法错误 localhost:8080/project/lib/style.less 第 1 行第 1 列：* 1 @IMPORT "./css/lib"; * 2 @charset "utf-8";
不完全确定错误是什么 - 我会尝试使用 lessapp 并确保您的 less 文件至少声明了一种样式
我想要做的是将 LESS 文件导入到一个通用的“主”LESS 文件中。这样我就可以引用我所有的变量等。但它不起作用！我在链接到 less.js 文件的方式上做错了吗？
派对迟到了，但我遇到了这个问题，直到我意识到我使用的是单引号而不是双引号 - 所以我应该使用 @import "variables" 而是使用 @import 'variables' .这些年JS太多了……

标签： css less

【解决方案1】：

我刚刚在本地环境中尝试过，将 vars 放入 vars.less 并将 mixins 放入 conf.less。文件结构与您的类似，基本 .less 文件位于包含所有“包含”的文件夹的下一级。

所以我有css 文件夹，其中有我的main.less 文件，然后是css/less/vars.less | conf.less

要同时导入这两个：

@import "less/vars.less";
@import "less/conf.less";

我唯一的答案是删除@import 语句中的第一个/。我在尝试将谷歌字体导入我的.less 文件时遇到了类似的问题。

至少值得一试，因为使用与我的相同的结构。

【讨论】：

【解决方案2】：

我遇到了类似的问题，导入似乎静默失败。事实证明，我的编辑器已将 @import-ed 文件保存为带有 BOM 的 UTF-8，如 this question 中所述。

无论出于何种原因，LESS 编译器都会在具有 BOM 的 @import-ed 文件上静默阻塞，即使如果您的 root 文件具有 BOM，它也会报错。

尝试在没有 BOM 的情况下重新保存您的 @import-ed 文件，它可能会起作用。

【讨论】：

【解决方案3】：

如果没有错误，我不确定是什么问题。

我建议使用lessapp，http://incident57.com/less/，我发现它工作得很好，而且更容易使用。还要小心尝试导入空白文件，因为它可能会引发错误。

我上传了一些基本代码，用于根据项目构建文件 - 您可以在 https://github.com/danethurber/seamLESS 获取它们。那也许可以提供帮助，如果您或任何人想贡献我会很高兴的帮助:)

【讨论】：

让我把这个无缝连接起来...您链接到 HTML 文件中的独立 .css 文件。您到底在哪里使用 .less 文件？
less 文件位于 less 文件夹中 - 我使用 less 来编译所有其他文件并输出 css 文件
啊哈 - 看来我无法在没有 mac 的情况下运行该 less.app -.-' 但我认为将 <script src="lib/js/less.js"></script> 放在 <head> 标记的末尾会为我编译它？
你也可以这样做——我只是更喜欢编译它，这样浏览器就不必这样做了
确保将less文件放在js之前

【解决方案4】：

当您链接到 /directory 时，它会从根目录自上而下查找，在这种情况下找不到它。所以@Daniel 建议删除斜线是正确的。

你应该这样链接它：

@import url("css/StyleToImport.less");

这是因为你的起点在 css 目录本身内，然后向下指向该目录 css/，然后指向文件本身。

如果你需要先上一个目录，然后再上下，你会这样做

../directory/file.less

【讨论】：