vue项目less 使用

第一步 确认自己vue环境是否已经搭建完成

第二步  进入build/webpack.base.conf.js 增加如下代码

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
}

第三步 下载所需要的依赖

npm install less less-loader --save-dev
npm install css-loader style-loader

第四步，使用

<style scoped lang="less">
  .hello{
    margin: 100px 0;
    border-top: 1px solid #000000;
    h1{
      color: red;
    }
    .flexCon{
      display: flex;
      justify-content:space-around;
      .flexdiv{
        text-align: center;
        color: blue;
        font-size: 22px;
      }
    }
  }

转载于:https://www.cnblogs.com/hellosxs/p/11428310.html