vue2 怎么使用lesss

在 Vue 2 中引入 Less 需要通过两个步骤：首先安装 Less 转换器，然后配置 Vue 项目使其能够在运行时编译 Less 文件。

**步骤1：安装Less**
打开终端（Mac/Linux）或命令提示符（Windows），在你的 Vue 项目的根目录下运行：

npm install --save-dev less less-loader node-less
# 或者使用 yarn
yarn add -D less less-loader node-less

这会安装 `less`, `less-loader` 和 `node-less`，它们分别是 Less 格式化工具、Webpack 插件和用于在服务器端处理 Less 的 Node.js 库。

**步骤2：配置Webpack**
在 `vue.config.js` 文件中（如果不存在，则创建它）添加 Less 的加载器配置：

// vue.config.js
module.exports = {
  //...
  chainWebpack: config => {
    config.module
      .rule('less')
      .test(/\.less$/) // 匹配.less文件
      .use('style-resources-loader') // 首先使用风格资源加载器
        .loader('style-resources-loader') // 加载器名
        .options({
          patterns: ['path/to/your/styles.less'] // 将你的样式资源文件路径添加到这里
        })
      .use('less-loader') // 然后添加 less-loader
        .loader('less-loader')
        .tap(options => ({ ...options, javascriptEnabled: true })); // 设置javascriptEnabled选项以便支持变量等特性
  },
};

确保将 `'path/to/your/styles.less'` 替换成实际的 Less 文件路径。

**步骤3：编写Less文件**
现在你可以开始在项目中编写 `.less` 文件了。例如，在 `src/assets/styles/main.less` 中：

@primary-color: #007bff;

body {
  background-color: @primary-color;
}

最后，当你在 Vue 组件里引用这个 Less 文件里的样式时，比如 `<template> <div class="app"></div> </template>`，Vue 会在构建时自动转换并应用这些 Less 样式。