vue2中less的安装以及使用教程

目录

• 1.安装
• 1.1 在vue cli2 使用vue init webpack xxx 创建的项目
• 1.2 在vue cli3中（vue create xxx）
• 2.使用
• 2.1定义变量      
• 2.2 在属性中使用变量
• 2.3混合（Mixin）      
• 总结

1.安装

1.1 在vue cli2 使用vue init webpack xxx 创建的项目

webpack安装要考虑less-loader的兼容问题，

npm install [email protected]

如果7.0.0不行，就一步一步下探，6.0.0   5.0.0

安装less-loader成功后，

npm install --save less

安装less

在webpack.base.config.js的rules里添加

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

在.vue文件的style区，加上lang='less'

1.2 在vue cli3中（vue create xxx）

npm install less-loader -- save-dev 

npm install less --save-dev

在.vue文件的style区，加上lang='less'

2.使用

2.1定义变量      

@width: 500px;
@height: @width+10px;
@red: #f00;
@transparent: 0.5;
@radius: 30px;

注意变量也可以引用变量

2.2 在属性中使用变量

#app {
  width: @width;
  height: @height;
  background-color: @red;
}

2.3混合（Mixin）      

.border() {
  border-radius: @radius;
  border-color: @red;
}
 
.colors() {
  primary: #3385ff;
  secondary: green;
}
 
#app {
  width: @width;
  height: @height;
  background-color: @red;
  .border();
}

编译出来就是

#app {
  width: 500px;
  height: 510px;
  background-color: #f00;
  border-radius: 30px;
  border-color: #f00;
}

2.4在引用变量时，做一些运算

  .inner-app {
    width: @width / 2;
    height: @height / 2;
    background-color: #00f;
  }

编译出来是

.inner-app {
  width: 500px / 2;
  height: 510px / 2;
  background-color: #00f;
}

2.5可以以属性名作为变量

 .app2 {
    @width: 200px;
    width: @width;
    height: $width;
    background-color: .colors[secondary]; // .colors在上边Mixin里定义的
  }

编译出来是

.app2 {
  width: 200px;
  height: 200px;
  background-color: green;
}

2.6引用父元素以及祖先元素（&）     

#app {
  width: @width;
  height: @height;
  background-color: @red;
  &:hover {
    opacity: @transparent;
    &::after {
      content: "anc";
    }
    &::before {
      content: "xyt";
    }
  }
}

编译出来是

#app:hover {
  opacity: 0.5;
}
#app:hover::after {
  content: "anc";
}
#app:hover::before {
  content: "xyt";
}

注意 &引用的是所有父元素和祖先元素

总结

到此这篇关于vue2中less的安装以及使用教程的文章就介绍到这了,更多相关vue2 less安装使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！