less 安装 引入 使用

 vue项目安装less

npm install less-loader@4.1.0 --save

配置less 

找到 build/webpack.base.conf.js,  在module的rules 数组添加下面代码

module.exports = {
  ...
  ...
  module: {
    rules: [
    {...},
    {...},
    {
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader'
    }
  ]
}

vue页面中使用less及引入其他less 文件

<style lang="less" scoped >
@import '../assets/css/project';
</style>

 常用语法

// 变量
@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}
// 混合
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
// 嵌套
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
}