Vue2.0 中使用Less

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>