LESS 变量覆盖和导入顺序 app.less无变量light-theme.lesscorp-colors.lessx-component/style.less

问题描述

在我们的 app.less 文件中，我们导入了几个变量文件，然后是各个组件样式表。

app.less

@import variables.less /* Original app styles/colors */
@import corp-colors.less /* corporate color variables */
@import light-theme.less /* Theme deFinitions */

@import '../components/style' /* This file contains imports of every component in the app */

variables.less 文件定义了 @link-color...

无变量

@link-color: #1997CA;

light-theme.less 通过引入公司颜色重新定义了它。

light-theme.less

body.light-theme {
    @link-color: @corp-blue;
}

corp-colors.less

```少 @corp-blue：#2a60c8； ``

最后，在我的组件中，我消化了标签底部边框的变量。

x-component/style.less

li {
    &.is-selected {
       .tab-label {
           border-bottom: 3px solid @link-color;
       }
    }
}

由于 light-theme 是在 variables 之后导入的，我希望看到边框颜色为 #2a60c8，但我看到的是原始的 #1997CA。 但是，如果我将组件样式更改为使用 @corp-blue 而不是 @link-color，它会正确显示。

我是否忽略了导入和覆盖排序的内容？

解决方法

LESS 变量不像 CSS 变量那样工作，它们在编译阶段计算它们的值，而不是在运行时。看来你需要改变：

body.light-theme {
    @link-color: @corp-blue;
}

到：

@link-color: @corp-blue;