vue项目安装less如何使用

Vue项目安装Less并使用的过程通常分为以下几个步骤：

1. **安装依赖**：
使用npm或yarn来安装`vue-cli-plugin-less`插件，这将提供对Less的支持。如果你使用的是Vue CLI 4+，可以在项目根目录运行：

   npm install --save-dev vue-cli-plugin-less
   或者
   yarn add -D vue-cli-plugin-less

2. **配置CLI**：
在`.vue-cli/config.js`文件中，添加`less`插件配置到构建链中：

   module.exports = {
     // ...
     chainWebpack: config => {
       const lessLoader = require('less-loader');
       config.module.rule('less')
         .test(/\.less$/)
         .use(lessLoader)
         .loader('less-loader');
     },
   };

3. **引用Less样式**：
在需要使用Less的组件中，通过`.vue`文件的<style lang="less">标签引入Less文件：

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

   <style lang="less">
     @import '~@/styles/common.less'; // 引入全局Less变量或规则

     .your-component-class {
       /* Less样式 */
       color: red;
     }
   </style>

4. **编译**：
现在你可以像平常一样运行`npm run serve`或者`yarn serve`来启动服务器，编译后的CSS会自动应用到HTML中。