vue项目引入scss、elementui使用全局scss修改主题色，vue的路由引入；less的使用

一、vue项目引入scss

https://blog.csdn.net/Ag_wenbi/article/details/87799557

二、elementui使用全局scss修改主题色

1、在项目下新建color.css，内容位置如下

内容：

$--color-primary: #EE1D23;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
@font-face {font-family:gljIcon;src:url(~@/assets/fonts/iconfont.woff) format("woff"),url(~@/assets/fonts/iconfont.ttf) format("truetype");}
.gljIcon{font-family: "gljIcon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.tree-cust:before {content: "\e618";}
.icon-group:before {content: "\e61a";}
.icon-meter:before {content: "\e61b";}
.icon-sum:before {content: "\e61c";}
.icon-meterVirtual:before {content: "\e61d";}
.icon-gaojing:before {content: "\e61e";}
.icon-quanping:before {content: "\e621";}
//修改菜单样式
.el-submenu__title:hover{background-color:#EE1D23 !important;color:#fff !important;}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title{border-color: #EE1D23 !important;background: #EE1D23 !important;}
.el-menu.el-menu--horizontal{border: none;}
.el-menu--horizontal > .el-menu-item.is-active{border-color: #EE1D23 !important;background: #EE1D23 !important;}
.bgColor:hover{background: #EE1D23 !important;color: #fff !important;}
.el-menu--horizontal .el-menu .el-menu-item.is-active{color: #fff !important;background: #EE1D23 !important;}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{color: #fff !important;background: #EE1D23 !important;}
//修改表格样式
.cell .el-button--text{color:#0099ff;}
.menu_  .el-dialog__body{padding-top: 10px;}
//弹窗样式
.el-dialog__header{border-bottom:1px solid #ccc;box-sizing: border-box;}
.el-dialog__headerbtn .el-dialog__close{color: #EE1D23;font-weight: bold;}
//时间框样式
.el-time-spinner .el-time-spinner__wrapper.el-scrollbar:nth-child(2){display: none !important;}
//滚动条的宽度
::-webkit-scrollbar {width: 10px;height: 10px;}
//滚动条的滑块
::-webkit-scrollbar-thumb {background-color: #EE1D23;border-radius: 10px;}
//滚动条框大小
.el-table__fixed-right-patch{width:15px !important;}

引入使用：

二、创建路由

固定创建：在src下创建→router→index.js

index.js内容

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/pages/login/login'
import Main from '@/pages/main/main'
Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',name: 'Login',component: Login},
    {path: '/Main',name: 'Main',component: Main}
  ]
})

动态创建：main.js下

import Router from 'vue-router'
Vue.use(Router)

function findNav_(navArr,nav){
  for(let i=0;i<navArr.length;i++){
    if(navArr[i].children.length != 0){//存在子菜单
      if(navArr[i].url != "一级菜单"){
        nav.push({
          path:navArr[i].path,
          name:navArr[i].name,
          component:resolve=>require(["@/pages/"+navArr[i].url],resolve),
          children:[]
        })
      }
      findNav_(navArr[i].children,nav);
    }else{//不存在子菜单
      nav.push({
        path:navArr[i].path,
        name:navArr[i].name,
        component:resolve=>require(["@/pages/"+navArr[i].url],resolve),
      });
    }
  }
}

axios.post("menu/getAllMenu")
.then(result=>{//向后台请求菜单
  const routers = new Router({//通过这种形式导入路由
    routes: (()=>{
      let navArr=result.data;
      let nav = [];
      findNav_(navArr,nav);//递归
      return nav
    })()
  })
  new Vue({
    el: '#app',
    router:routers,
    store,
    components: { App },
    template: '<App/>'
  });
}).catch(err=>{
  console.log(err);
})

less的使用

//定义变量
@color：#fff
.myclass{
    background:@color;
}

//定义共用代码段
.gy{
    display:flex
}
.myclass{
    .gy;
    align-items:center;
}

//定义传参,不传参有默认参数
.gycc(@bgcolor:#000){
    background:@bgcolor
}

.myclass{
    .gycc(red)
}

scss（sass的新版本）

//定义变量
$color = "#fff"
.class{
    background:$color
}
//定义共用片段
@mixin gy{
    display:flex;
}
.myclass{
    @include gy
}
//定义共用片段,带默认参数
@mixin gy($align:center,$justify:center){
    display:flex;
    align-items:$align;
    justify-content:$justify;
}
.myclass{
    @include gy(center.center)
}
//同层级
div li{
    &:hover{}
}

//继承
.cl{
    color:#fff;
}
.myclass{
    @extend .cl;
}