How to use less global variables in quasar

[332lfgb6]

hello!

fail

Index.vue

<template>
  <q-page padding>
    <span class="red-text">Move!</span>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex'
}
</script>

<style lang="less">
.red-text {
  color: @redText;
}
</style>

src/css/common.css`

@redText: red;

.text-text-cyan {
  color: cyan
}

success

Index.vue

<template>
  <q-page padding>
    <span class="text-text-cyan">Move!</span>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex'
}
</script>

<style lang="less">
</style>

version

"less": "^4.1.1",
"less-loader": "^5.0.0"
@quasar/cli 2.1.15

what should I do next?