vue style中使用less变量

在Vue项目中，如果要在style中使用less变量，可以通过以下步骤实现：

1. 首先安装插件style-resources-loader和vue-cli-plugin-style-resources-loader。可以使用npm命令进行安装：

   npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

这个插件可以帮助我们在全局范围内共享样式变量。

2. 如果你的项目是使用vue-cli构建的，可以直接使用以下命令安装插件：

   vue add style-resources-loader

这个命令会自动将插件添加到项目中，并进行相应的配置。

3. 如果你的项目没有使用vue-cli构建，你可以手动进行配置。首先，在项目的vue.config.js文件中添加以下配置：

   module.exports = {
     // ...
     pluginOptions: {
       'style-resources-loader': {
         preProcessor: 'less',
         patterns: [
           // 这里添加你的less文件路径，可以是单个文件或者是一个文件夹
           // 例如：path.resolve(__dirname, './src/styles/index.less')
         ]
       }
     }
     // ...
   }

这样配置之后，你就可以在全局范围内使用less变量了。

4. 最后，确保你在需要使用less变量的组件的style标签中使用lang="less"，并且不需要再使用@import引入样式文件。例如：

   <style lang="less">
   .custom_text {
     padding-bottom: 50px;
     color: @primary-color;
   }
   </style>

这样，你就可以在Vue的style中直接使用less变量了，而不需要每次都使用@import引入样式文件。