将.css文件导入.less文件

可以将.css文件导入.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文件不会仅导入其他.less文件...吗？还是我引用错了...？！

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

@import (css) "lib";

将输出

@import "lib";

和

@import (less) "lib.css";

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

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

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

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

@import (less) "foo.css"

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

检查文档。

将css文件的文件扩展名更改为.less。您不需要在其中写任何LESS；所有CSS都是有效的（除了您必须转义的MS内容，但这是另一个问题。）

根据Fractalf的回答，此问题已在v1.4.0中修复

在LESS网站上：

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

@import“ lib.css”; 该指令将保持不变，并最终显示在CSS输出中。

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

试试这个 ：

@import "lib.css";

从官方文件：

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

资料来源： http : //lesscss.org/

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

我的

 @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

如果要导入应尽量减少的css文件，请使用以下行：

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

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

示例：@import（内联）“ not-less-compatible.css”；

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

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