一、定义全局变量

src/styles/variables.less

@primary-color: deeppink; // 主题色

二、组件中使用

使用前需要先引入该文件

<style lang="less" scoped>
@import '@/styles/variables';
#app {
  color: @primary-color;
}
</style>

三、全局引入

如果很多个页面都使用到了，每个页面都引入一次很麻烦

vue.config.js

  css: {
    loaderOptions: {
      // less-loader
      less: { additionalData: "@import '@/styles/variables';" }
    }
  }