Vue 2.6.11 版本 的vue.config.js中的chainWebpack通过链式操作加入less-laoder

如果你想通过链式操作的方式在 Vue 2.6.11 中使用 `less-loader`，你可以在 `vue.config.js` 中使用 `chainWebpack` 对 webpack 配置进行修改，来加入对 `.less` 文件的处理。具体来说，你需要添加一个针对 `.less` 文件的 loader 规则，使用了 `vue-style-loader`、`css-loader` 和 `less-loader`。例如：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('less')
      .test(/\.less$/)
      .use('vue-style-loader')
        .loader('vue-style-loader')
        .end()
      .use('css-loader')
        .loader('css-loader')
        .end()
      .use('less-loader')
        .loader('less-loader')
        .end()
  }
}

上述配置中，我们通过 `chainWebpack` 方法获取到了 webpack 配置的 `config` 对象，然后使用了 `rule` 方法添加了一个针对 `.less` 文件的 loader 规则，使用了 `vue-style-loader`、`css-loader` 和 `less-loader`。其中 `vue-style-loader` 和 `css-loader` 用来处理样式文件，`less-loader` 用来将 `.less` 文件编译成 CSS 文件。

配置完成后，你就可以在 Vue 组件中使用 `.less` 文件了，例如：

<template>
  <div class="hello">
    Hello World
  </div>
</template>

<style lang="less">
.hello {
  background: red;
}
</style>

这样就可以在 Vue 项目中愉快地使用 Less 了。