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

当前回答

如果你想要你的CSS被复制到输出而不被处理，你可以使用(内联)指令。例如,

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

其他回答

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

@import (css) "lib";

将输出

@import "lib";

and

@import (less) "lib.css";

将导入lib.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.css。Less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

我使用lessc 2.5.3

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

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

来自LESS网站:

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

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

推荐文章