将.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错误NameError: .type is undefined

.less文件不会导入.css文件，只有其他无用的文件…？还是我提到它错了…？

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

 @import (css) "lib";

会输出

 @import "lib";

和

 @import (less) "lib.css";

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

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

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

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

根据Fractalf的回答，这个问题在v1.4.0中得到了解决

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

 @import (less) "foo.css"

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

检查文档。

来自LESS网站：

如果你想导入一个CSS文件，而不想LESS来处理它，只需使用.css扩展名：

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

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

尝试这个：

 @import "lib.css";

从正式文件：

您可以导入css和更less的文件。只有更less的文件导入语句被处理，CSS文件导入语句保持原样。如果你想导入一个CSS文件，而不想LESS来处理它，只需使用.css扩展名：

来源： http : //lesscss.org/

如果你只是想导入一个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）with lessc my.less out/my.css *

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

我正在使用lessc 2.5.3

如果你想导入一个应该被踩踏的css文件，使用下面这行：

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

因为1.5.0你可以使用'inline'关键字。

例如：@import（inline）“not-less-compatible.css”;

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

（来源： http : //lesscss.org/features/#import-directives-feature ）