在vue中使用less
1.使用less对Login.vue进行css设置
<template>
<div class="login_container">登录组件</div>
</template>
<script>
export default {};
</script>
// 定义单文件组件必须设置scoped
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
}
</style>
报错,因为我们并没有下载less相关的loader
2.下载less相关的开发依赖
下载开发依赖less-loader和less,有时候会下载失败,关闭页面,重启一下vue ui,重新下载即即可。
随后,重新启动app,即可看到刷新后的页面
3.其他样式调整
但是此时样式还需要调整,在assets下创建css->global.css,并在main.js中导入
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
}