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>