安装所需包

1. less

   npm i less -g

2. less-loader

   npm i less-loader@7

创建全局 less 文件

1. 在 src/assets 中创建 less/index.less 文件。

2. 代码：（持续更新中，仅供参考）

   @c_vuyc: #5A9CF8;
   @c_success: #7EC050;
   @c_warning: #DCA550;
   @c_error: #E47470;
   @c_font: #888;
   @c_border: #eee;
   
   .b(@a:0px){
       bottom: @a;
   }
   .bg(@c){
       background-color: @c;
   }
   .bg_i(@a){
       background-image: url(@a);
       background-size: cover;
       background-repeat: no-repeat;
       background-attachment: fixed;
   }
   .bg_n(){
       background-color: rgba(0,0,0,0);
   }
   .bg_s(@a){
       background-size: @a;
   }
   .bg_s(@a,@b){
       background-size: @a @b;
   }
   .bg_lg(@a,@b,@c){
       background: linear-gradient(@a,@b,@c);
   }
   .bor(@a,@b,@c){
       border: @arguments;
       .box_s();
   }
   .bor_b(@a,@b,@c){
       border-bottom: @arguments;
       .box_s();
   }
   .bor_n(){
       border: none;
   }
   .bor_r(@a){
       border-radius: @a;
   }
   .bor_r(@a,@b,@c,@d){
       border-radius: @arguments;
   }
   .box_s(){
       box-sizing: border-box;
   }
   .box_s(@a,@b,@c,@d){
       box-shadow: @arguments;
   }
   .box_s(@a,@b,@c,@d,@e){
       box-shadow: @arguments;
   }
   .bor_tb(@a,@b,@c){
       border-top: @arguments;
       border-bottom: @arguments;
       .box_s();
   }
   .c(@a){
       color: @a;
   }
   .df(){
       display: flex;
   }
   .dis(@val:block){
       display: @val;
   }
   .font(@a:18px){
       font-size: @a;
   }
   .font_cc(@a){
       text-align: center;
       line-height: @a;
   }
   // 两端对齐
   .font_jus(){
       text-align-last: justify;
   }
   .font_w(@a:bold){
       font-weight: @a;
   }
   .f_ai(@a:center){
       align-items: @a;
   }
   .f_fd(@a:column){
       flex-direction: @a;
   }
   .f_fw(@a:wrap){
       flex-wrap: @a;
   }
   .f_jc(@a:center){
       justify-content: @a;
   }
   .h(@a){
       height: @a;
   }
   .l(@a){
       left: @a;
   }
   .line_h(@a) {
       line-height: @a;
   }
   .max_w(@a){
       max-width: @a;
   }
   .max_h(@a){
       max-height: @a;
   }
   .marg(@a:auto){
       margin: @a;
   }
   .marg(@a,@b){
       margin: @a @b;
   }
   .marg(@a,@b,@c,@d){
       margin: @arguments;;
   }
   .mar_t(@a){
       margin-top: @a;
   }
   .mar_b(@a){
       margin-bottom: @a;
   }
   .mar_l(@a){
       margin-left: @a;
   }
   .mar_r(@a){
       margin-right: @a;
   }
   .min_w(@a){
       min-width: @a;
   }
   .min_h(@a){
       min-height: @a;
   }
   .no_bor(){
       border: none;
   }
   .over(@a:hidden){
       overflow: @a;
   }
   .over_x(){
       overflow-x: scroll;
   }
   .over_y(){
       overflow-y: scroll;
   }
   .padd(@a){
       padding: @a;
       .box_s();
   }
   .padd(@a,@b){
       padding: @a @b;
       .box_s();
   }
   .padd(@a,@b,@c){
       padding: @a @b @c;
       .box_s();
   }
   .padd(@a,@b,@c,@d){
       padding: @arguments;;
       .box_s();
   }
   .pad_b(@a){
       padding-bottom: @a;
       .box_s();
   }
   .pad_l(@a){
       padding-left: @a;
       .box_s();
   }
   .pad_r(@a){
       padding-right: @a;
       .box_s();
   }
   .pad_t(@a){
       padding-top: @a;
       .box_s();
   }
   .pos_a(){
       position: absolute;
   }
   .pos_f(){
       position: fixed;
   }
   .pos_r(){
       position: relative;
   }
   .pos_lt(@a:0,@b:0){
       left: @a;
       top: @b;
   }
   .pos_lb(@a:0,@b:0){
       left: @a;
       bottom: @b;
   }
   .pos_rt(@a:0,@b:0){
       right: @a;
       top: @b;
   }
   .pos_rb(@a:0,@b:0){
       right: @a;
       bottom: @b;
   }
   .r(@a){
       right: @a;
   }
   .size(@a){
       width: @a;
       height: @a;
   }
   .size(){
       width: 100%;
       height: 100%;
   }
   .size(@w,@h){
       width: @w;
       height: @h;
   }
   .size_vv(){
       width: 100vw;
       height: 100vh;
   }
   .t(@a){
       top: @a;
   }
   .tac(){
       text-align: center;
   }
   .tar(){
       text-align: right;
   }
   .taj(){
       text-align: justify;
   }
   .text_i(@a:2em){
       text-indent: @a;
   }
   .tran_t(@a:-50%,@b:-50%){
       transform: translate(@a,@b);
   }
   .w(@a){
       width: @a;
   }
   .z_in(@a){
       z-index: @a;
   }
   .outline(@a:none) {
       outline: @a;
   }
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
       -webkit-appearance: none !important;
   }
   // 鼠标样式
   .cursor(@a:pointer) {
       cursor: @a;
   }
   .page {
       .size(100%, 40px);
       .mar_t(10px);
       .df();
       .f_ai();
       .f_jc(flex-end);
   }
   .line_1 {
       overflow: hidden;
       text-overflow:ellipsis;
       white-space: nowrap;
   }
   .line_2 {
       text-overflow: -o-ellipsis-lastline;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       line-clamp: 2;
       -webkit-box-orient: vertical;
   }
   .line_3 {
       text-overflow: -o-ellipsis-lastline;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       line-clamp: 3;
       -webkit-box-orient: vertical;
   }
   li {
       list-style: none;
   }
   .wh {
       .size()
   }
   .main_box {
       .size();
       .bg(white);
       .bor_r(10px);
       .padd(20px);
   }

局部引入

1. 为方便引入，我们在 vue.config.js 中对 src/assets/less 进行 路径重命名

   // vue.config.js 局部代码
   alias: {
       'asle': resolve('src/assets/less')
   }

2. 在需要 .vue 中引入并使用 index.less

   <style lang="less" scoped>
       @import "asle/index.less";
       .rigis_box {
           .size(300px,100px);
           .bg(red);
       }
   </style>