1安装less_loader依赖

2安装less

3目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'Vue.use(Router)export default new Router({routes:[{path:'/',redirect:'/login'},{path:'/login',component:Login}]
})

login.vue

<template><div class="login_container"><div class="login_box"></div>
</div></template><script>
export default{}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'
new Vue({router,render: h => h(App)
}).$mount('#app')

global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}

运行结果