CSS 为什么我不能将 .less 文件导入单个 .less 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5474731/
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
Why can't I import .less files into a single .less file?
提问by KristianB
I have this structure of my files:
我的文件结构如下：
lib/css/...contains my styles divided into single .less files for each kind of area.
lib/css/...包含我的样式，针对每种区域分为单个 .less 文件。
lib/style.lessis the file I want to gather my sub-style files into - and the file I want to be linked into the HTML.
lib/style.less是我想要将我的子样式文件收集到的文件 - 以及我想要链接到 HTML 的文件。
When I type in (into style.less):
当我输入（输入style.less）时：
@import url("/css/StyleToImport.less");
@import url("/css/StyleToImport.less");
or
或者
@import "/css/StyleToImport.less";
@import "/css/StyleToImport.less";
... I get a syntax error.
...我收到一个语法错误。
Is it really impossible to combine .less files into a single file?
将 .less 文件合并成一个文件真的不可能吗？
It could be really handy to have 1 single file to contain all variables for colors, dimensions etc.
拥有 1 个单个文件来包含颜色、尺寸等的所有变量可能非常方便。
But as it is now, I have to use <link ...>tags in HTML to every single file - which is not so handy.
但就像现在一样，我必须<link ...>在每个文件中使用HTML 中的标签 - 这不是那么方便。
P.S. I have read Join two .less files into one css file
PS 我读过Join two .less files into one css file
and I have read this:
我读过这个：
Importing
Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. If the file is a .less, the extension is optional:
@import "library";
@import "typo.css";
输入
导入工作几乎按预期工作。您可以导入一个 .less 文件，其中的所有变量都将可用。如果文件是 .less，则扩展名是可选的：
@import "图书馆";
@import "typo.css";
回答by Daniel
I just tried this on my local environment, putting vars into vars.lessand mixins into conf.less. The file structure similar to yours, with the base .less file a level below the folder containing all the 'includes'.
我只是在我的本地环境中尝试了这个，将 varsvars.less和 mixins 放入conf.less. 文件结构与您的类似，基本 .less 文件位于包含所有“包含”的文件夹下方。
So I had cssfolder which had my main.lessfile and then css/less/vars.less | conf.less
所以我有一个css文件夹，里面有我的main.less文件，然后css/less/vars.less | conf.less
To import both of those:
要导入这两个：
@import "less/vars.less";
@import "less/conf.less";
My only answer is to remove the first /in your @importstatement. I had similar problems when trying to import a google font into my .lessfile.
我唯一的答案是删除/您@import声明中的第一个。尝试将 google 字体导入我的.less文件时，我遇到了类似的问题。
Worth a shot at least, because using the same structure as yours mine is working.
至少值得一试，因为使用与你的相同的结构是有效的。
回答by Chris Jaynes
I had a similar problem where the imports seemed to fail silently. It turned out that my editor had saved the @import-ed files as UTF-8 with BOM, as described in this question.
我有一个类似的问题，导入似乎无声无息地失败。事实证明，我的编辑器已将 @import-ed 文件保存为带有 BOM 的 UTF-8，如本问题所述。
For whatever reason, the LESS compiler chokes silently on @import-ed files that have a BOM, even though it barfs up an error if your rootfile has a BOM.
无论出于何种原因，LESS 编译器都会对具有 BOM 的 @import-ed 文件进行静默阻塞，即使如果您的根文件具有BOM，它也会引发错误。
Try re-saving your @import-ed files without a BOM, and it just might work.
尝试重新保存没有 BOM 的 @import-ed 文件，它可能会起作用。
回答by Marlyse Comte
As you are linking to /directory it looks from root top down and in this case would not find it. So @Daniel is correct by suggesting to remove the slash.
当您链接到 /directory 时，它从根目录自上而下查找，在这种情况下找不到它。所以@Daniel 建议删除斜杠是正确的。
You should link it as such:
你应该这样链接它：
@import url("css/StyleToImport.less");
This, because your starting point is within the css directory itself and then point down into that directory css/ and then pointing to the file itself.
这是因为您的起点在 css 目录本身内，然后向下指向该目录 css/ 然后指向文件本身。
If you would need to go first up a directory and then over and down you would do
如果你需要先上一个目录，然后一遍又一遍，你会做
../directory/file.less
回答by dane
I'm not exactly sure what the problem is without the error.
如果没有错误，我不确定问题是什么。
I would suggest using lessapp, http://incident57.com/less/, which i have found works very well and is a little easier to use. Also be wary of trying to import blank files cause it can throw an error.
我建议使用lessapp, http://incident57.com/less/，我发现它工作得很好并且更容易使用。还要小心尝试导入空白文件，因为它可能会引发错误。
I uploaded some basic code that i use to structure my files depending on the project - you can get them at https://github.com/danethurber/seamLESS. That maybe able to help and if you or anybody wants to contribute i'ld be happy for the help :)
我上传了一些基本代码，用于根据项目构建我的文件 - 您可以在https://github.com/danethurber/seamLESS获取它们。这可能会有所帮助，如果您或任何人想贡献我的帮助，我会很高兴:)
