Vue2.0 中使用Less
第一步 npm安装less
npm install less less-loader --save
第二步 修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加如下代码
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
第三步 在组件中的style 添加lang="less"
类似下列代码
<style lang="less">
.header{
width: 750px;
height: 400px;
.header-title{
position: fixed;
width: 750px;
height: 94px;
line-height: 94px;
vertical-align: middle;
z-index: 20;
h1{
width: 622px;
font-size: 34px;
display: inline-block;
vertical-align: middle;
}
.header-back{
display: inline-block;
width: 17px;
height: 30px;
background: url(images/header-back.png) no-repeat;
background-size: 100%;
text-align: left;
vertical-align: middle;
}
.header-talk{
display: inline-block;
width: 47px;
height: 39px;
background: url(images/header-talk.png) no-repeat;
background-size: 100%;
text-align: left;
vertical-align: middle;
}
}
.header-banner{
width: 750px;
height: 400px;
background: url(images/lby20180530-banner01.jpg) no-repeat;
background-size: 100%;
}
}
</style>
引入外部less文件则在style标签之后引入 @import './index.less',如下列代码
<style lang="less">
@import './index.less'; //引入全局less文件
</style>