你能把.css文件导入.less文件中吗…？
我对它比较熟悉，并将其用于我的所有开发。我经常使用如下结构：
1
2
3
4
5
6
7
| @import"normalize";
//styles here
@import"mixins";
@import"media-queries";
@import"print"; |
所有的导入都是其他的。更少的文件，所有的工作都是正常的。
我目前的问题是：我想将.css文件导入.less，以引用.css文件中使用的样式，如下所示：
1
2
3
4
5
6
7
| @import"../style.css";
.small {
font-size:60%;
.type;
}
// other styles here |
.css文件包含一个名为.type的类，但当我试图编译.less文件时，会得到错误NameError: .type is undefined。
.less文件不会导入.css文件，只导入其他.less文件…？或者我引用的是错误的…？！
- less返回到css，因此您应该能够将style.css重命名为style.less，然后按照通常的方式导入它…当然，除非重命名style.css不是一个选项。
- 是的，不幸的是，重命名.css文件实际上是不可能的。
- 有同样的问题。请支持问题github.com/cloudhead/less.js/issues/303
- 如果不需要从外部引用.css，同时也不能修改(重命名)该.css文件，则可以创建一个具有.less扩展名的符号链接。然后将其作为.less文件引用。作为一个符号链接，它减轻了同步它们的负担，因为您的.css更改会立即影响导入的.less文件。缺点是您应该在随后的更改之后重新编译最终的CSS。有关在Windows中创建符号链接的信息，请在命令窗口中键入MKLINK /?。
- @jackwanders，重命名是不必要的，因为更少的返回到css(正如您正确指出的那样)。您可以使用内联(less)指令导入.css文件，并利用.css语法是有效的.less语法这一事实。
通过指定选项，可以强制将文件解释为特定类型，例如：
意志输出
和
1
| @import (less)"lib.css"; |
将导入lib.css文件并将其视为较少的文件。如果指定的文件较少且不包含扩展名，则不会添加任何扩展名。
- 这是正确的答案。第三个将导入并编译CSS代码，使其代码更少，并且不会使指令保持完整。
- 我认为应该使用@import(include)"lib.css"。我不喜欢对编译器撒谎的语义。当然，当您知道文件中没有更少的代码时。
- 你是英雄！
- 这将为foo.css创建一个额外的HTTP请求，因此现在可以优先使用(inline)指令(请参阅stackoverflow.com/a/22594082/160968)。
- (inline)不起作用，因为它不将外部引用转换为字体或其他@import的CSS文件。最后得到的是一个更大的CSS文件，它会导致404个HTTP请求…
- 正在回滚最新的编辑，因为它只是错误的，没有回答问题。
- @URS以及其他所有人，这只是假设您编译的客户端更少。这不是我的情况，当然也不是规则，所以这样做服务器端是完全好的，在我的特定情况下，它像一个魅力。+ 1
如果希望将CSS复制到输出中而不进行处理，则可以使用(inline)指令。例如。，
1
| @import (inline) '../timepicker/jquery.ui.timepicker.css'; |
- 很完美。当您想要合并一些CSS文件(例如，在ie7.less中)时，这很好地工作，但不一定要处理它们(例如，bootstrap-ie7使用表达式，后者处理得不好)。
- 非常有帮助。@import (css)"styles.css";不适合我。
- 它们都处理不同的用例。使用(css)时，@import指令将保持原样，因此浏览器将在运行时加载css文件；使用(inline)时，css文件的内容实际上会导入到已编译的样式表中，例如，如果该文件不在Web根目录中，则需要这样做。注意，当@import使用.css文件时，默认行为与(css)标志相同-阅读文档了解更多信息：)
- 因此，如果您的CSS文件有@import指令，这显然不起作用，因为这需要"处理"。
- "inline"是否意味着它的所有导入也将被inline？有递归内联的方法吗？
- @街灯我不认为它是递归内联的，我不知道这样做的指令。如果您有控制权，可以将源文件更改为.less文件。
- 这应该是最好的答案。如果您使用(更少)，处理器将尝试解释CSS代码，而不仅仅包括它。
- 对于那些使用CSS缩小和更少的人来说，这对我很有用。我用的是cg角。
将CSS文件的文件扩展名更改为.less。您不需要在其中写更少的内容；所有CSS都是无效的(除了您必须转义的MS内容，但这是另一个问题。)
根据Fractalf的答案，这在v1.4.0中是固定的。
- 从技术上讲，这不是导入CSS文件。
- @nilsk你是正确的；但是如果你想在另一个文件中使用类，你需要一个更少的文件，而不是css。
- 是的，这似乎有点不必要。
- @nilskp您是说更改扩展名太多了，以至于无法对文件进行较少的分析吗？
- 是的，当然是。试着在你拥有所有文件的小家庭项目之外思考。想想更大，多人的项目，不是每个人都用得更少。在很多用例中，更改文件名是不可行的。
- WebKit不仅仅是"微软的东西"，它也有无效的东西。例如，@-webkit关键帧不能用更少的
- 您应该关心您的CSS是否包含类似于calc(100%-45px)的内容，并且您希望在浏览器中包含这些内容。如果处理文件的次数越少，最终输出将为：calc(55%)；因为calc的处理次数越少。
- 此外，如果您使用的是包管理器(如Bower)，则这不是一个选项。
- 尊重处理得很好的上游修复。
我必须在1.7.4版本中使用以下内容
我知道公认的答案是@import (css)"foo.css"，但没有起作用。如果要在新的less文件中重用CSS类，则需要使用(less)，而不是(css)。
检查文档。
- 接受的答案最初有正确的选项(是的，如果您想重用一些样式的CSS文件，则只有(less)选项)，但出于某种原因@fractalf用最新编辑删除了正确的部分。
- 您可以将"引用"和"更少"组合在一起：@import (less, reference)"foo.css"。
从更少的网站：
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.
正如jitbit在下面的注释中指出的那样，这实际上只对开发用途有用，因为您不想让不必要的@import消耗宝贵的带宽。
- 这将不会导入该文件，它将保留@import指令的完整性。它仍然有效，但是你应该避免CSS导入——看看这个开发者：google.com/speed/docs/best practices/&hellip；
- 谢谢你的信息@jitbit。就我个人而言，我发现在开发期间使用@import更容易，然后在转移到生产环境时将导入的文件合并并缩小为单个样式表。
- 如果您仔细阅读这个问题(而不仅仅是标题行)，您将看到op想要引用CSS文件中的一个类作为mixin，如果它只是作为一个简单的css导入进行解析，则不可能这样做。
试试这个：
官方文件：
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:
资料来源：http://lesscss.org/
- 如果您仔细阅读这个问题(而不仅仅是标题行)，您将看到op想要引用CSS文件中的一个类作为mixin，如果它只是作为一个简单的css导入进行解析，则不可能这样做。
如果您只想导入一个CSS文件作为引用(例如使用mixins中的类)，但不想在结果中包含整个CSS文件，则可以使用@import (less,reference)"reference.css";：
少了
1
2
3
4
5
6
| @import (less,reference)"reference.css";
.my-class{
background-color:black;
.reference-class;
color:blue;
} |
参考文献
1
2
3
| .reference-class{
border: 1px solid red;
} |
*使用lessc my.less out/my.css的结果(my.css)*
1
2
3
4
5
| .my-class {
background-color: black;
border: 1px solid red;
color: blue;
} |
我用的是lessc 2.5.3。
- 这就是我需要的。然而，我不得不使用扩展语法：&:extend(.reference-class all);。直接引用类导致编译错误。
如果您想导入一个CSS文件，应该少用这一行：
1
2
3
| .ie {
@import (less) 'ie.css';
} |
因为1.5.0 u可以使用"inline"关键字。
示例：@import(inline)"not less compatible.css"；
当一个CSS文件可能不太兼容时，您将使用它；这是因为尽管不太支持大多数已知标准的CSS，但它不支持某些地方的注释，并且不支持所有已知的CSS黑客，而不修改CSS。因此，您可以使用它将文件包含在输出中，以便所有CSS都在一个文件中。
(来源：http://lesscss.org/features/import directives feature)