LESS variable overrides and import order

Question

In our app.less file, we import a few variable files, and then the individual component style sheets.

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 */

The variables.less file defines @link-color...

variables.less

@link-color: #1997CA;

And the light-theme.less redefines it by pulling in the corp color.

light-theme.less

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

corp-colors.less

```less @corp-blue: #2a60c8; ```

Finally, in my component, I digest the variable for a tab bottom border.

x-component/style.less

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

As the light-theme is imported after variables, I'd expect to see the border color as #2a60c8, but am seeing the original #1997CA instead. However, if I change the component style to use @corp-blue instead of @link-color, it shows correctly.

Am I overlooking something with import and override ordering?

user_2570353 · Answer

LESS variables work not like CSS variables, they calculate their values on the compilation stage, not in runtime. It seems like you need to change:

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

to:

@link-color: @corp-blue;