导入。css文件到。less文件

你能把。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文件吗?还是我引用错了?!

138699 次浏览

将css文件的扩展名更改为.less。你不需要在里面写“少”字;所有CSS都是有效的LESS(除了MS的东西,你必须转义,但这是另一个问题。)

Per Fractalf's answer这在v1.4.0中得到修复

更少的网站:

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

< p > @ import“lib.css”;指令会保持原样,最后变成

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

试试这个:

@import "lib.css";

来自官方文件:

可以同时导入css和less文件。只有更少的文件导入 语句被处理,CSS文件导入语句保持原样 是这样的。如果你想导入一个CSS文件,并且不希望LESS处理 它只需要使用.css扩展名:


来源: http://lesscss.org/

你可以通过指定一个选项强制一个文件被解释为特定的类型,例如:

@import (css) "lib";

将输出

@import "lib";

而且

@import (less) "lib.css";

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

如果你想要你的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,使用这一行:

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

如果你只是想导入一个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

从1.5.0开始,你可以使用'inline'关键字。

示例:@import (inline)“not-less-compatible.css”;

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

(来源:http://lesscss.org/features/#import-directives-feature)