如何将多个文件中的较少变量合并到一个文件中？

Question

我有两个变量文件，即 component-lib.less 和 component-override.less。

例如。组件-lib.less

@primary-color: red;
@secodary-color: black;
@background-color: grey;

例如。组件覆盖.less

@background-color: blue;
@component-padding: 12px;

所以每当我想使用这些变量时，我都需要将两个文件都导入到目标文件中。

例如。输入.less

@import './component-lib.less';
@import './component-override.less';

Input {
  padding: @component-padding;
  background-color: @background-color;
}

有什么方法可以将变量文件导入到一个文件中，然后导出所有变量从那里？

例如。变量.less

@import './component-lib.less';
@import './component-override.less';

@brand-color: orange;

并像这样使用它，

例如。输入.less

@import './variable.less';

Input {
  padding: @component-padding;
  background-color: @background-color;
}

Answer 1

您的问题的答案是“是”。 您可以在单个 .less 文件中导入所有 .less 变量文件，并在您的组件 .less 文件中使用它。 在您的情况下，您可以在此文件中创建一个“variable.less”导入“component-lib.less”和“component-override.less”。然后在'Input.less'中使用'variable.less' 这是如何运作的？基本上，魔法发生在 less-loader 中。 'less-loader' 是一个通常用于加载和解析 .less 文件的包。加载程序通过“Input.less”并找到对“variable.less”的引用，后者又找到对其他文件的引用（“component-lib.less”和“component-override.less”）。它导入所有变量并解析“Input.less”。 我希望你觉得这个解释有帮助。如果您有任何疑问，请告诉我。