Question

可以将.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文件不会导入.css文件，只能导入其他无文件......？或者我引用它错了......？！

Answer 1

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

@import (css) "lib";

将输出

@import "lib";

和

@import (less) "lib.css";

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

Answer 2

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

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

Answer 3

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

每Fractalf's answer这已在v1.4.0中修复

Answer 4

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

@import (less) "foo.css"

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

Answer 5

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

@import“lib.css”;该指令将保持原样，最终结束   在CSS输出中。

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

Answer 6

试试这个：

@import "lib.css";

来自官方文档：

您可以导入css和less文件。只导入较少的文件语句被处理，css文件import语句保存为它们是。如果要导入CSS文件，并且不希望LESS处理它，只需使用.css扩展名：

来源： http://lesscss.org/

Answer 7

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

my.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

Answer 8

如果要导入应被视为较少的css文件，请使用此行：

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

Answer 9

因为1.5.0你可以使用＆＃39; inline＆＃39;关键字。

示例：@import（inline）＆＃34; not-less-compatible.css＆＃34 ;;

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