vue项目less 使用

Posted 2022-09-07 hellosxs

第一步 确认自己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;