how to use less variables in vue components?

Question

I have imported the .less file to the vue component, but it still gives me an error.

I define the variables in base.less under assets/less.

@font-face {
  font-family: 'Poppins';
  src: url(../fonts/Poppins-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

@button-bg-color: #809c2c;
@button-bg-color-hover: #99b056;
@button-border-radius: 7px;
@button-font: 'Poppins';

And import it to App.vue.

<style lang="less" scoped>
@import './assets/less/main.less';

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2em;

  .header-title-nav {
    width: 60%;
  
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      width: 6.25em;
      height: 6.25em;
    }

    .logo {
      width: 100%;
      height: 100%;
    
      cursor: pointer;
    }
  }

  .header-btn {
    background-color: @button-bg-color;
    border-radius: .5em;
    width: 12.5em;
    height: 7.8125em;
    text-decoration: none;
    color: white;
    font-size: .8em;
    font-weight: 600;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: #99b056;
    }
  }
}
</style>

The error message appears in the line under .header-btn in VScode is property value expected.

I installed less, and variables are able to use in main.less.

There's others who encounter the same problem just add an import statement and solved, but it didn't work for me.

Answer 1

You set variables in base.less and include main.less...
Also, if you are using vite, and want the less varables to be awailables in all components, set this in vite.config.ts:

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/assets/less/variables.less";',
      },
    },
  },
})