vue2 中 style怎么使用lang=less

在Vue 2中，如果你想使用Less样式语言而不是默认的CSS，你需要将`.vue`组件中的`.style`标签的`lang`属性设置为`less`。以下是步骤：

1. 在`.vue`文件的`<template>`部分下，添加一个`<style>`标签，并在其`lang`属性上指定`"less"`：

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<style lang="less">
/* 在这里编写Less样式 */
@primary-color: #007BFF; /* 示例 Less 变量 */
.container {
  background-color: @primary-color;
  // 更多 Less 语法...
}
</style>

2. 将`.less`文件中的变量、混合规则等Less特性直接写入该标签内。

3. 在构建过程中，需要配置Vue CLI以支持Less。你可以安装`vue-style-loader`和`css-loader`（如果未安装），并更新`build`目录下的`configureWebpack.js`（或其他webpack配置文件）来处理Less文件。例如，添加到`module.rules`中：

// configureWebpack.js 或其他webpack配置
rules: [
  {
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
  },
  // 其他规则...
]

4. 确保已安装必要的依赖，如`less`、`less-loader`（如果有冲突可能需要安装`@vue/cli-plugin-less`）。

5. 保存并重启项目，然后就可以在浏览器中看到编译后的Less样式了。