Vue使用less

在建好的vue项目中：第一步：安装less依赖，npm install less less-loader --save第二步：修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加{test: /\.less$/,loader: "style-loader!css-loader!less-load

叶才鑫

5580人浏览 · 2018-01-25 16:06:33

叶才鑫 · 2018-01-25 16:06:33 发布

在建好的vue项目中：

第一步：

安装less依赖，npm install less less-loader --save

第二步：

修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

现在基本上已经安装完成了，然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域有效)

 
  <stylelang="less"scoped> 
 
  @nice-blue:  #5B83AD; 
 
  @light-blue:@nice-blue +#111; 
 
  .header{ 
 
          background:@light-blue; 
 
  } 
 
  </style>

例子：（上传格式会乱请自行格式化代码）

 
 <divclass="box"></div> 

 
  @ly_width: 
  100px; 
  //自定义宽 
 
 
  @ly_height: 
  100px; 
  //自定义高 
 
 
  .border-radius ( 
  @radius: 
  50%) { 
  //简单的圆角 
 
 
  -webkit-border-radius: 
   @radius; 
 
 
  -moz-border-radius: 
   @radius; 
 
 
  border-radius: 
   @radius; 
 

   } 
 

 
  .box-shadow ( 
  @x: 
  0px, 
  @y: 
  3px, 
  @blur: 
  5px, 
   @alpha: 
  0.5) { 
  //方块阴影 Box Shadow 
 
 
  -webkit-box-shadow: 
   @x 
  @y 
  @blur 
  rgba( 
  0, 
  0, 
  0, @ 
  alpha); 
 
 
  -moz-box-shadow: 
   @x 
  @y 
  @blur 
  rgba( 
  0, 
  0, 
  0, @ 
  alpha); 
 
 
  box-shadow: 
  @x 
  @y 
  @blur 
  rgba( 
  0, 
  0, 
  0, @ 
  alpha); 
 

   } 
 

 
  .transition ( 
  @prop: 
  all, 
  @time: 
  1s, 
  @ease: 
  linear) { 
  //元素过渡效果 Transition 
 
 
  -webkit-transition: 
   @prop 
  @time 
   @ease; 
 
 
  -moz-transition: 
   @prop 
  @time 
   @ease; 
 
 
  -o-transition: 
   @prop 
  @time 
   @ease; 
 
 
  -ms-transition: 
   @prop 
  @time 
   @ease; 
 
 
  transition: 
  @prop 
  @time 
  @ease; 
 

   } 
 
 
  .transform ( 
  @rotate: 
  90deg, 
  @scale: 
  1, 
  @skew: 
  1deg, 
  @translate: 
  10px) { 
  //转换/旋转 Transform 
 
 
  -webkit-transform: 
   rotate(@rotate) 
  scale(@scale) 
   skew(@skew) 
  translate(@translate); 
 
 
  -moz-transform: 
   rotate(@rotate) 
  scale(@scale) 
   skew(@skew) 
  translate(@translate); 
 
 
  -o-transform: 
   rotate(@rotate) 
  scale(@scale) 
   skew(@skew) 
  translate(@translate); 
 
 
  -ms-transform: 
   rotate(@rotate) 
  scale(@scale) 
   skew(@skew) 
  translate(@translate); 
 
 
  transform: 
  rotate(@rotate) 
  scale(@scale) 
  skew(@skew) 
  translate(@translate); 
 

   } 
 
 
  .gradient ( 
  @origin: 
  left, 
  @start: 
  #ffffff, 
  @stop: 
  #000000) { 
  //线性渐变  
 
 
  background-color: 
   @start; 
 
 
  background-image: -webkit-linear-gradient( 
  @origin, 
  @start, 
  @stop); 
 
 
  background-image: -moz-linear-gradient( 
  @origin, 
  @start, 
  @stop); 
 
 
  background-image: -o-linear-gradient( 
  @origin, 
  @start, 
  @stop); 
 
 
  background-image: -ms-linear-gradient( 
  @origin, 
  @start, 
  @stop); 
 
 
  background-image: 
   linear-gradient(@origin, @ 
  start, @stop); 
 

   } 
 

 
  .box{ 
 
 
  width: 
  @ly_width; 
 
 
  height: 
  @ly_height; 
 
 
  background: 
  @nice-red; 
 
 
  .border-radius( 
  50%); 
  //简单的圆角 
 
 
  .box-shadow( 
  5px, 
  5px, 
  6px, 
  0.3); 
  //方块阴影 Box Shadow 
 
 
  .transition( 
  all, 
  0.5s, 
  ease-in); 
  //元素过渡效果 Transition 
 
 
  .transform( 
  5deg, 
  0.5, 
  1deg, 
  0px); 
  //转换/旋转 Transform 
 
 
  .gradient( 
  left, 
  #663333, 
  #333333); 
  //线性渐变 
 

   } 
 
 
  .box:hover { 
 

        
  opacity: 
   0; 
 

   } 
 

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^