Question

尽管使用import-once，LESS仍在不同文件中导入相同的LESS。

例如：

<link rel="stylesheet/less" type="text/css" href="app.less">
<link rel="stylesheet/less" type="text/css" href="theme.less">

app.less

@import-once "1.less";

body{
    color:blue;
}

theme.less

@import-once "1.less";

body{
    color:pink;
}

产生

<style type="text/css" id="less:good-docs-less-app">
    body {
        background: yellow;
    }
    body {
        color: blue;
    }
</style>

<style type="text/css" id="less:good-docs-less-theme">
    body {
        background: yellow;
    }
    body {
        color: pink;
    }
</style>

您注意到body{background:yellow}在两种样式中都是重复的。是否可以在两个LESS文件中导入它而不将其写入两次？

Answer 1

不是我知道的。但我建议将所有LESS代码编译成单个文件。这样做，您还可以减少对服务器的呼叫次数，即对页面进行小幅度的优化。

在我参与的项目中，我们倾向于为所有LESS提供一个主文件，因此，所有样式都被编译成一个CSS文件。

示例：

styles.less是主文件。它没有自己定义任何样式，但只包含import语句
variables.less包含一些在整个项目中使用的常规变量。它们被定义一次，并在任何地方重复使用。示例：颜色，字体，标题等。
包含实际样式的更多文件。只要有可能，请使用LESS mixins以避免代码重复。

另一方面，重复的风格定义并不严重。只需处理CSS样式定义的顺序，因为它们会相互覆盖。

希望这会有所帮助......

Answer 2

你误解了import-once的作用。当代码在无。代码中编译时，它会阻止导入再次发生。但是，在您将theme.less链接到app.less之前，<html>对app.less之前被调用的人没有“知识”。到那时，import-once已经完成了它的工作并产生了你的第一部分css。

因此.less仅阻止在特定app.less文件中发生的第二次导入。例如，如果您的@import-once "1.less"; @import "theme.less"; body{ color:blue; }有此：

1.less

然后theme.less中的app.less文件将不会被重新导入，因为它已在<link>内导入一次。此时，我们在编译期间在里面 LESS代码。在<html>内有两个连续的import-once命令，情况并非如此。

正如phammer在帖子中所说，解决方案是将所有LESS编译成单个主CSS文件以链接到html。这样，您可以将所有LESS代码“保持在一起”（因此它会像您期望的那样识别{{1}}）。

少量CSS引擎导入 - 一次重复样式

2 个答案: