css - 将 .css 文件导入 .less 文件

Question

您可以将 .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 文件...？还是我引用错了……？！

score 329 · Accepted Answer

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

@import (css) "lib";

将输出

@import "lib";

和

@import (less) "lib.css";

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

score 255 · Accepted Answer

如果你希望你的 CSS 被复制到输出中而不被处理，你可以使用(inline)指令。例如，

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

score 30 · Accepted Answer

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

@import (less) "foo.css"

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

检查文档。

score 29 · Accepted Answer

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

根据Fractalf 的回答，这已在 v1.4.0 中修复

score 8 · Accepted Answer

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

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

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

score 8 · Accepted Answer

试试这个：

@import "lib.css";

来自官方文档：

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

来源： http: //lesscss.org/

score 6 · Accepted Answer

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

我的.less

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

参考.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

score 4 · Accepted Answer

如果你想导入一个应该被少踩的 css 文件，请使用这一行：

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

score 4 · Accepted Answer

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

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

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

9 回答 9