我真的很喜欢 LESS 的想法和概念.然而我偶然发现了一个错误,我很久以前就向作者报告了这个错误,但还没有得到任何反馈。也许只有我做错了什么。
我的 application.less
- 看起来与此类似的文件:
@import "reset";
@import "config";
@import "header";
@import "forms";
[…]
我喜欢可以使用 @import
规则来拆分我的文件,以便更好地了解我的 css 声明。然而,每个导入的文件都需要重新导入 config.less-File again 才能使用我在其中定义的 mixin 和变量。
我敢打赌你已经知道我在插入哪种冗余:每次导入 config.less 时,它的“输出”都会成为 application.css 的一部分。
我的配置文件包含大约 200 行代码。由于我将我的 CSS 分成大约 5 个文件(基于我的 Controller 名称)需要重新导入配置,所以我最终生成了大约 1000 行 100% 冗余的 CSS 代码。
我能想出的唯一解决办法就是不拆分我的文件,这是我真正想避免的。
最佳答案
虽然不理想,但实际原因是您导入的文件理论上不需要包含任何 CSS。通常,您会有变量和动态混合,它们不会影响您的 CSS 输出:
lib.less:
#colors {
@blue: #0011ff;
@red: #ee2222;
}
.button (@width: 10px) {...}
main.less:
@import "lib";
a { color: #colors[@blue]; }
输出,main.css:
a { color: #0011ff; }
#colors {} 和 .button
在这种情况下不会被输出。
关于使用 LESS 及其 @import 时的 CSS 冗余,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2132138/