将.css文件导入到.less文件中。

241

你能够把 .css 文件导入到 .less 文件中吗?

我对 less 很熟悉,所有的开发都使用它。我经常使用以下结构:

@import "normalize";

//styles here

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

所有的导入都是其他的.less文件,一切正常。

我目前遇到的问题是这样的: 我想在.less中导入一个.css文件,并引用.css文件中使用的样式,如下所示:

@import "../style.css";

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

在 .css 文件中有一个名为 .type 的类,但是当我尝试编译 .less 文件时,出现了错误 NameError: .type is undefined

.less 文件不能导入 .css 文件吗?只能导入其他 .less 文件...?还是我的引用方式不对...?!


5
LESS 会回退到 CSS,因此你应该可以只将 style.css 重命名为 style.less,然后像往常一样导入它...除非当然不允许重命名 style.css。 - jackwanders
3
很不幸,重命名 .css 文件并不是真正可行的。 - Mr Jonny Wood
1
有同样的问题,请支持这个问题 https://github.com/cloudhead/less.js/issues/303 - Yaroslav
5
如果您不需要外部引用.css文件,同时也不能修改(重命名).css文件,那么您可以创建一个符号链接并将其扩展名更改为 .less,然后将其引用为 .less 文件。由于它是符号链接,它会解除同步的负担,因此您对.css文件所做的更改会立即影响到导入的.less文件。缺点是您需要在随后的更改后重新编译最终的css。有关在Windows中创建符号链接的信息,请在命令窗口中键入“MKLINK /?” - Ivaylo Slavov
@jackwanders,不需要重命名,因为LESS会回退到CSS(正如您正确指出的那样)。您可以使用内联(less)指令导入.css文件,并利用.css语法是有效的.less语法这一事实。 - ira
9个回答

333
您可以通过指定选项来强制将文件解释为特定类型,例如:

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

@import (css) "lib";

将输出

@import "lib";

@import (less) "lib.css";

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


1
这是正确的答案。第三个将会将CSS代码作为较少的代码导入+编译,而不会保留指令。 - CMCDragonkai
1
我认为应该使用@import(包括)“lib.css”。我不喜欢欺骗编译器的语义。当你知道文件中没有任何LESS代码时,当然。 - user481081
17
这将为foo.css创建一个额外的http请求,因此“(inline)”指令(参见https://dev59.com/y2gu5IYBdhLWcg3wnoSC#22594082)现在更可取。 - Urs
由于最新的编辑是错误的,并且没有回答问题,因此回滚最新的修改。 - seven-phases-max
1
@Urs,还有其他所有人,这仅适用于您编译较少的客户端。这不是我的情况,当然也不是规则,因此在服务器端执行此操作完全没有问题,在我个人的情况下,它非常有效。+1 - tfrascaroli

261

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

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

7
完美。当您想要连接一些CSS文件(例如在ie7.less中)时,这很有效,但不一定要处理它们(例如bootstrap-ie7使用表达式,LESS无法很好地处理)。 - Joe
5
非常有帮助。 @import (css) "styles.css"; 对我没有起作用。 - ivkremer
11
它们适用于不同的用例。在(css)中,@import指令保持不变,因此CSS文件将在运行时由浏览器加载;而在(inline)中,CSS文件的内容实际上被导入到已编译的样式表中,如果该文件超出了您的Web根目录,则可以使用这种方法。请注意,使用@import导入.css文件的默认行为与(css)标志相同 - 阅读文档以获取更多信息 :) - neemzy
“inline” 的意思是所有它的导入也会被内联吗?有没有递归内联的方法? - streetlight
对于正在使用CSS压缩和Less的人,这对我很有效。我正在使用cg-angular。 - Abhishek Deb
显示剩余2条评论

31

我不得不在1.7.4版本中使用以下内容

@import (less) "foo.css"

我知道被认可的答案是@import (css) "foo.css",但它没有生效。如果你想在新的less文件中重用你的css类,你需要使用(less)而不是(css)

请查阅文档


2
被接受的答案最初是正确的选项(是的,如果您想重用CSS文件的某些样式,则(less)唯一选项),但由于@Fractalf的最新编辑,他删除了正确的部分。 - seven-phases-max
1
你可以结合使用“reference”和“less”:@import (less, reference) "foo.css" - Skarllot

29
将你的CSS文件扩展名更改为.less。您不需要在其中编写任何LESS代码;所有CSS都是有效的LESS(除了MS部分,您必须进行转义,但这是另一个问题)。根据Fractalf的回答,这个问题在v1.4.0中已经解决。

4
从技术上讲,那并不是导入CSS文件。 - nilskp
1
@nilskp 你是在说要改变扩展名太过困难了,以至于无法将文件解析为LESS吗? - Evan Davis
23
当然可以。尝试跳出仅涉及您拥有所有文件的小型家庭项目的思维范畴。考虑更大规模、多人参与的项目,不是每个人都使用LESS。有许多情况下无法更改文件名。 - nilskp
1
你应该关注一下你的CSS是否包含类似这样的内容:calc(100% - 45px); 并且你希望在浏览器中看到它。如果Less将文件处理为Less格式,最终输出将是:calc(55%);因为Less会计算calc。 - Christof Aenderl
另外,如果您正在使用像bower这样的软件包管理器,这不是一个选项。 - Josh Hunt
显示剩余4条评论

8

来自LESS网站:

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

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

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


14
这不会导入文件,而是保留 @import 指令。它仍然可以正常工作,但应避免使用 css-import - 参见此处 https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport - Alex from Jitbit
5
感谢 @jitbit 提供的信息。个人认为,在开发过程中使用 @import 更容易,然后在转移到生产环境时将导入的文件合并和压缩成一个样式表。 - jeffjenx
1
如果您仔细阅读问题(而不仅仅是标题行),您会发现 OP 想要将 css 文件中的类作为 mixin 引用,如果只是作为简单的 css 导入进行解析,则无法实现。 - awe

8

试试这个:

@import "lib.css";

来自官方文档:

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


来源: http://lesscss.org/


2
如果您仔细阅读问题(而不仅仅是标题行),您会发现 OP 想要将 css 文件中的类作为 mixin 引用,如果只是作为简单的 css 导入进行解析,则无法实现。 - awe

6
如果你只想引用 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;
}

*使用 lessc my.less out/my.css 命令生成的结果(my.css)*

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

我正在使用lessc 2.5.3

这正是我所需要的。但是,我必须使用扩展语法:&:extend(.reference-class all);。直接引用类会导致编译错误。 - Jens Neubauer

5
如果您想导入一个应被视为less的css文件,请使用以下代码行:

@import (less) url("style.css");

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

4
自1.5.0起,您可以使用'inline'关键字。
示例:@import(inline) "not-less-compatible.css";
当CSS文件可能不兼容Less时,您将使用此选项;这是因为虽然Less支持大多数已知的CSS标准,但它在某些地方不支持注释,并且在不修改CSS的情况下不支持所有已知的CSS hack。
因此,您可以使用此选项将文件包含在输出中,以便所有CSS都在一个文件中。
(来源:http://lesscss.org/features/#import-directives-feature

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接