umi4+vue3项目:使用全局less变量

src\assets\style\variable.less文件

/*
* 颜色
*/

@success-color-0: green;
@blue-color-0: blue;
@error-color-0: red;
@white-color-0: #fff;
@black-color-0: #000;
@black-color-1: #888;


@margin-padding-10: '10px';
@margin-padding-20: '20px';

vue文件

<template>
  <div>
    <h2>Yay! Welcome to umi ❤️ vue!</h2>
    <p>
      <img src="../assets/yay.jpg" width="388" />
    </p>
    <p>To get started, edit <code>pages/index.vue</code> and save to reload.</p>
    <!-- <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button> -->
    <div class="box">
      this is test
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElButton } from "element-plus";
export default defineComponent({
  components: {
    // ElButton,
  },
  setup() {},
});
</script>

<style lang="less" scoped>
@import url('@/assets/style/variable.less');
.box {
  height: 400px;
  border: 1px @black-color-1 solid;
}
</style>