编译更少的文件不拾取全局更少的变量答案

【问题标题】：Compiling less files not picking up global less variables编译更少的文件不拾取全局更少的变量
【发布时间】：2019-09-17 19:34:20
【问题描述】：

我有一个 gruntjs 文件，我在其中编译到 css 的内容较少。我最近回到了一个遗留项目，旨在提高性能。

我的任务是不是导入 all.less 中的所有文件，而是说 articlePage.less 和 cmets.less 如下所示；

'All.less', // Contains all the global variables
'component-commenting.less',
'component-popular-insights.less',
'component-reading-list.less'

我的 grunt 文件中有这些，但问题是，这些文件中的每一个都包含较少的字体、颜色、媒体查询等变量，并且不包含任何全局内容。这些文件有什么办法吗要在 all.less 中获取全局变量，还是需要将全局变量导入到每个文件中？

【问题讨论】：

只需创建一个名为 constants.less 的文件，或者任何你想调用的文件，然后把你所有的颜色、字体等都放在那里。然后将导入指令 @import "constants.less"; 粘贴在需要这些值的任何其他 less 文件的顶部。不需要比这更复杂。
感谢@sthurston，这是一种可能的方法，即在每个组件的顶部仅包含排版、颜色等，但如果页面上有两个组件，那么我们就复制了css，增加大小。那么在 all.less 中导入的常量变量会发生什么。当页面加载 all.less 时，可能有 2/3 的组件文件被加载了 2/3 次声明的常量变量
顺便说一句，请注意 Less 变量是 "lazy evaluated"，这会导致“最后定义获胜”（又名 LDW）规则。换句话说，如果在同一个（例如全局）范围内有多个同名变量 - 最后一个具有更高的优先级。因此，如果（例如）'all.less' 和 'component-reading-list.less' 都定义了名为 @boo 的变量，你应该把 'all.less' after 'component-reading-list .less' 如果你想使用 'all.less' 的变量（是的，那么这些变量将应用于（在同一范围内）所有导入的文件）。
另见No !default, thanks!，它基本上说明了 LDW（变量是否在导入的文件中定义并不重要 - 所有导入的文件共享相同的范围，这是它们所在的范围导入）。

【解决方案1】：

您的组件 LESS 文件应在文件顶部包含您的 All.less 文件的 @import 语句。确保使用正确的导入路径。

考虑将 All.less 重构为仅包含所需的变量/媒体查询等。

@import './All.less';

【讨论】：

@seven-phases-max 哎呀。更正了文件扩展名。谢谢
问题不在于扩展，而在于不同的 Less/Sass 行为（尤其是涉及可变范围/生命周期时） - 例如在问题中查看我的 cmets（将 All.less 放在导入文件的顶部不会改变任何内容，也不是真正必要的）。