导入。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是未定义的

.less文件不导入.css文件，只导入其他.less文件吗?还是我引用错了?!

当前回答

我不得不在1.7.4版本中使用以下代码

@import (less) "foo.css"

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

检查文档。

其他回答

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

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

试试这个:

@import "lib.css";

来自官方文件:

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

来源:http://lesscss.org/

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

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

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

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

我不得不在1.7.4版本中使用以下代码

@import (less) "foo.css"

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

检查文档。

来自LESS网站:

如果你想导入一个CSS文件，并且不希望LESS处理它，只需使用.css扩展名: @ import“lib.css”;指令会保持原样，最后变成的CSS输出。

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

推荐文章