将.css文件导入.less文件

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)指令.例如,

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

Answer 3

我不得不在版本1.7.4中使用以下内容

@import (less) "foo.css"

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

查看文档.

Answer 4

将css文件的文件扩展名更改为.less.你不需要写任何LESS; 所有CSS都是有效的LESS(除了你必须逃脱的MS之外,这是另一个问题.)

根据Fractalf的回答,这在v1.4.0中已得到修复

Answer 5

来自LESS网站:

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

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

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

Answer 6

试试这个 :

@import "lib.css";

来自官方文件:

您可以导入css和less文件.只处理较少的文件import语句,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';
}