Tech

Vue3, Vite, Less, JS

Background

Hi all, I am writing a Less Plugin function in my Vue3 project. The function is to get the color code from a color object by the key parameter.

The Less Plugin file:

 getColor: function (key) {
  const COLORS = {
    'white-opa-03': 'rgba(255, 255, 255, 0.3)',
    'white-opa-04': 'rgba(255, 255, 255, 0.4)',
    'black-opa-045': 'rgba(0, 0, 0, 0.45)',
    'black-opa-065': 'rgba(0, 0, 0, 0.65)',
  }
  return COLORS[key]
}

How I called the plugin function

<style lang="less" scoped">
@plugin '../../../public/assets/style/plugins/color.js';

.label {
  color: getColor('black-opa-045');
}

</style>

The Problem

However, in the browser, it did not return the color code successfully, but remains to show the complete function call. browser result

What I have tried:

• When I tried to hard-code in the getColor function to make it get from a specific color instead of using the key parameter, it works.

     getColor: function (key) {
      const COLORS = {
        'white-opa-03': 'rgba(255, 255, 255, 0.3)',
        'white-opa-04': 'rgba(255, 255, 255, 0.4)',
        'black-opa-045': 'rgba(0, 0, 0, 0.45)',
        'black-opa-065': 'rgba(0, 0, 0, 0.65)',
      }
      return COLORS['black-opa-045']
    }

• There seems no problem with the key parameter - I tried to return it like below and the value is "black-opa-025"

     getColor: function (key) {
      const COLORS = {
        'white-opa-03': 'rgba(255, 255, 255, 0.3)',
        'white-opa-04': 'rgba(255, 255, 255, 0.4)',
        'black-opa-045': 'rgba(0, 0, 0, 0.45)',
        'black-opa-065': 'rgba(0, 0, 0, 0.65)',
      }
      return key
    }

Notes

• there are reason I don't store the color code in less is for single source of color code, that is shareable by both js & css files.

Thanks in advance!