将 .css 文件导入 .less 文件

import .css file into .less file

提问by Mr Jonny Wood

Can you import .css files into .less files...?

你能将 .css 文件导入到 .less 文件中吗...？

I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows:

我非常熟悉 less 并将其用于我的所有开发。我经常使用如下结构：

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

All imports are other .less files and all works as it should.

所有导入都是其他 .less 文件，并且一切正常。

My current issue is this: I want to import a .css file into .less that references styles used in the .css file as follows:

我目前的问题是：我想将一个 .css 文件导入到 .less 中，该文件引用了 .css 文件中使用的样式，如下所示：

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

The .css file contains a class called .typebut when I try to compile the .less file I get the error NameError: .type is undefined

.css 文件包含一个名为的类，.type但是当我尝试编译 .less 文件时出现错误NameError: .type is undefined

Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!

.less 文件会不会导入 .css 文件，只会导入其他 .less 文件...？还是我引用错了……？！

回答by Fractalf

You can force a file to be interpreted as a particular type by specifying an option, e.g.:

您可以通过指定一个选项来强制将文件解释为特定类型，例如：

@import (css) "lib";

will output

会输出

@import "lib";

and

和

@import (less) "lib.css";

will import the lib.cssfile and treat it as less. If you specify a file is less and do not include an extension, none will be added.

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

回答by mpen

If you want your CSS to be copied into the output without being processed, you can use the (inline)directive. e.g.,

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

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

回答by Gudradain

I had to use the following with version 1.7.4

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

@import (less) "foo.css"

I know the accepted answer is @import (css) "foo.css"but it didn't work. If you want to reuse your css class in your new less file, you need to use (less)and not (css).

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

Check the documentation.

检查文档。

回答by Mathletics

Change the file extension of your css file to .less. You don't need to write any LESS in it; all CSS is valid LESS (except of the MS stuff that you have to escape, but that's another issue.)

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

Per Fractalf's answerthis is fixed in v1.4.0

根据Fractalf 的回答，这已在 v1.4.0 中修复

回答by webdevkit

From the LESS website:

来自LESS 网站：

If you want to import a CSS file, and don't want LESS to process it, just use the .css extension:

@import "lib.css"; The directive will just be left as is, and end up in the CSS output.

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

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

As jitbit points out in the comments below, this is really only useful for development purposes, as you wouldn't want to have unnecessary @imports consuming precious bandwidth.

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

回答by Dr.Kameleon

Try this :

尝试这个 ：

@import "lib.css";

From the Official Documentation :

来自官方文档：

You can import both css and less files. Only less files import statements are processed, css file import statements are kept as they are. If you want to import a CSS file, and don't want LESS to process it, just use the .css extension:

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

---

---

Source :http://lesscss.org/

来源：http : //lesscss.org/

回答by hinneLinks

If you just want to import a CSS-File as a Reference (e.g. to use the classes in Mixins) but notinclude the whole CSS file in the result you can use @import (less,reference) "reference.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

引用.css

.reference-class{
    border: 1px solid red;
}

*Result (my.css) with lessc my.less out/my.css*

*结果（my.css）与lessc my.less out/my.css*

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

I'm using lessc 2.5.3

我正在使用 lessc 2.5.3

回答by Charles

If you want to import a css file that should be treaded as less use this line:

如果你想导入一个应该被踩到的 css 文件，请使用以下行：

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

回答by Pieter-Jan

since 1.5.0 u can use the 'inline' keyword.

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

Example: @import (inline) "not-less-compatible.css";

示例：@import (inline) "not-less-compatible.css";

You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS. So you can use this to include the file in the output so that all CSS will be in one file.

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

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

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