将 .css 文件导入 .less 文件答案

【问题标题】：import .css file into .less file将 .css 文件导入 .less 文件
【发布时间】：2012-06-27 03:44:34
【问题描述】：

您可以将 .css 文件导入 .less 文件吗...？

我对 less 非常熟悉，并将其用于我的所有开发。我经常使用如下结构：

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

所有导入都是其他 .less 文件，并且一切正常。

我目前的问题是：我想将 .css 文件导入到 .less 中，该文件引用 .css 文件中使用的样式，如下所示：

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

.css 文件包含一个名为 .type 的类，但是当我尝试编译 .less 文件时，我收到错误 NameError: .type is undefined

.less 文件会不会导入 .css 文件，而只会导入其他 .less 文件...？还是我引用错了……？！

【问题讨论】：

LESS 回退到 CSS，所以你应该能够将 style.css 重命名为 style.less，然后像往常一样导入它......当然，除非重命名 style.css 不是一个选项
是的，很遗憾重命名 .css 文件是不可能的。
有同样的问题。请支持问题github.com/cloudhead/less.js/issues/303
如果您不需要在外部引用.css，同时您不能修改（重命名）.css 文件，您可以创建一个指向它的符号链接，该链接具有@987654326 @ 延期。然后将其作为.less 文件引用。作为一个符号链接，它减轻了同步它们的负担，因为您的 .css 更改会立即影响正在导入的 .less 文件。缺点是您应该在后续更改后重新编译最终的 css。有关在 Windows 中创建符号链接的信息，请在命令窗口中键入 MKLINK /?
@jackwanders，重命名不是必需的，因为 LESS 回退到 CSS（正如您正确指出的那样）。您可以使用内联 (less) 指令导入 .css 文件，并利用 .css 语法是有效的 .less 语法这一事实

标签： css import less

【解决方案1】：

您可以通过指定选项来强制将文件解释为特定类型，例如：

@import (css) "lib";

会输出

@import "lib";

和

@import (less) "lib.css";

将导入lib.css 文件并将其视为更少。如果您指定一个文件较少且不包含扩展名，则不会添加任何文件。

【讨论】：

这是正确答案。第三个会将 CSS 代码导入 + 编译为更少的代码，并且不会保持指令完整。
我认为应该使用@import (include) "lib.css"。我不喜欢对编译器撒谎的语义。当然，当您知道文件中没有任何 LESS 代码时。
这将为 foo.css 创建一个额外的 http-request，因此(inline) 指令（参见stackoverflow.com/a/22594082/160968）现在更可取
(inline) 不起作用，因为它不会将外部引用转换为字体或其他@import'ed css 文件。你最终会得到一个更大的 css 文件，导致大量 404 HTTP 请求....
@Urs 以及其他所有人，这只是假设您编译的客户端较少。这不是我的情况，当然也不是规则，所以做这个服务器端完全没问题，在我的特殊情况下，它就像一个魅力。 +1

【解决方案2】：

如果您希望将 CSS 复制到输出中而不进行处理，您可以使用 (inline) directive。例如，

@import (inline) '../timepicker/jquery.ui.timepicker.css';

【讨论】：

完美。当您想要连接一些 CSS 文件（例如在 ie7.less 中）但不一定要处理它们（例如 bootstrap-ie7 使用表达式，LESS 不能很好地处理）时，这很有效。
非常有帮助。 @import (css) "styles.css"; 对我不起作用。
它们都针对不同的用例。使用(css)，@import 指令将保持原样，因此 CSS 文件将由浏览器在运行时加载；使用(inline)，CSS 文件的内容实际上会导入到编译后的样式表中，例如，如果该文件不在您的 Web 根目录中，这就是您想要的。请注意，@import.css 文件时的默认行为与 (css) 标志相同 - read the docs 以获取更多信息:)
所以如果你的 css 文件有 @import 指令，这显然是行不通的，因为这需要“处理”。
'inline' 是否意味着它的所有导入也将被内联？有没有办法递归内联？

【解决方案3】：

我必须在 1.7.4 版本中使用以下内容

@import (less) "foo.css"

我知道接受的答案是@import (css) "foo.css"，但它不起作用。如果你想在新的less文件中重用你的css类，你需要使用(less)而不是(css)。

检查documentation。

【讨论】：

接受的答案最初有正确的选项（是的，(less) 是 only 如果你想重用css文件的某些样式的选项）但出于某种原因@Fractalf用他最新的编辑删除了正确的部分。
可以结合“reference”和“less”：@import (less, reference) "foo.css"

【解决方案4】：

~~将您的 css 文件的文件扩展名更改为 .less。你不需要在里面写任何 LESS；所有 CSS 都是有效的 LESS（除了你必须逃避的 MS 东西，但这是另一个问题。）~~

根据Fractalf's answer，这已在 v1.4.0 中得到修复

【讨论】：

从技术上讲，这并不是在导入 CSS 文件。
@nilskp 你是对的；但是如果你想在另一个文件中使用这些类，你需要一个 LESS 文件，而不是 CSS。
@nilskp 你是说为了将文件解析为LESS，更改扩展名要求太多？
是的，当然是。尝试在您拥有所有文件的一些小型家庭项目之外思考。想想更大的多人项目，不是每个人都在使用 LESS。有很多用例无法更改文件名。
你应该注意你的css是否包含类似的东西：calc(100% - 45px);你想要在浏览器中。如果less将文件处理为less，最终输出将是：calc(55%);因为计算量少。

【解决方案5】：

来自LESS website：

如果你想导入一个 CSS 文件，并且不想让 LESS 处理它，只需使用 .css 扩展名：

@import "lib.css";该指令将保持原样，并结束在 CSS 输出中。

正如 jitbit 在下面的 cmets 中指出的那样，这实际上只对开发目的有用，因为您不希望有不必要的 @imports 消耗宝贵的带宽。

【讨论】：

这不会导入文件，它将保持@import 指令不变。它仍然可以工作，但你应该避免 css-import - 看看这个developers.google.com/speed/docs/best-practices/…
感谢@jitbit 的信息。就个人而言，我发现在开发过程中使用@import 会更容易，然后在进入生产环境时将导入的文件合并并缩小为单个样式表。
如果您仔细阅读问题（而不仅仅是标题行），您会看到 OP 想要将 css 文件中的类作为 mixin 引用，如果只是解析为简单的 css 导入。

【解决方案6】：

试试这个：

@import "lib.css";

来自官方文档：

您可以导入 css 和 less 文件。只导入较少的文件语句被处理，css文件导入语句保持原样是。如果你想导入一个 CSS 文件，并且不想让 LESS 处理它，只需使用 .css 扩展名：

来源： http://lesscss.org/

【讨论】：

如果您仔细阅读问题（而不仅仅是标题行），您会看到 OP 想要将 css 文件中的一个类作为 mixin 引用，如果只是解析为简单的 css 导入。

【解决方案7】：

如果您只想导入一个 CSS 文件作为参考（例如，使用 Mixins 中的类）但不在结果中包含整个 CSS 文件，您可以使用 @import (less,reference) "reference.css";:

我的.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

*结果（my.css）与lessc my.less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

我正在使用lessc 2.5.3

【讨论】：

这正是我所需要的。但是，我必须使用扩展语法：&:extend(.reference-class all);。直接引用该类会导致编译错误。

【解决方案8】：

如果你想导入一个css文件，该文件应该被当作less使用这一行：

.ie {
  @import (less) 'ie.css';
}

【讨论】：

【解决方案9】：

从 1.5.0 开始，您可以使用 'inline' 关键字。

示例：@import (inline) "not-less-compatible.css";

当 CSS 文件可能不兼容时，您将使用它；这是因为尽管 Less 支持大多数已知的标准 CSS，但它在某些地方不支持 cmets，并且不支持所有已知的 CSS hack 而无需修改 CSS。因此，您可以使用它在输出中包含文件，以便所有 CSS 都在一个文件中。

（来源：http://lesscss.org/features/#import-directives-feature）

【讨论】：