如何声明使用less？

在style标签中添加lang=“less”属性

<style lang="less" scoped>

less常用属性：

1、嵌套属性：在父元素的样式中可以写子元素的样式，结构清醒，减少取类名，&表示当前元素

#index {
  //min-width: 320px;
  //max-width: 750px;
  color: @color-text;

  &:hover {
    color: blue;
  }
  
  div {
    width: 200px;
  }

}

2、定义全局变量:@color-text: #0f0;使用@color-text的样式都为绿色

#index {
  @color-text: #0f0;
  //min-width: 320px;
  //max-width: 750px;
  color: @color-text;
}

修改主题：在项目中获取如下

cnpm install style-resources-loader@1.3.2-S
cnpm install vue-cli-plugin-style-resources-loader@0.1.5-S

修改根目录vue.config.js如下

const path=require('path')
module.exports={
pluginOptions:{
'style-resources-loader':{
preProcessor:'less',
patterns:[path.resolve(__dirname,"./src/theme/theme.less")],
}
},}

在assets文件下新建css文件，在css路径下新建global.less文件，在less文件中设置全局变量

3、继承属性：子元素在父元素样式中通过extend关键字继承父类元素的样式，例：

 .second-box {
    &:extend(#index)
  }