在 vue 中，可以通过以下方法，解决既可以在组件中使用全局变量，也可以在 less 文件中使用全局变量

已经安装 less 和 less-loader 的进行下面的操作，如果没有安装的就先安装这两个依赖

过渡 3.0 版本的 vue-cil 解决方案

定义一个存放变量的 less 文件 安装 style-resources-loader ， vue-cli-plugin-style-resources-loader

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

在 vue.config.js 中，把变量的 less 文件配置进去

const path = require('path'); // 这个是需要的
module.exports = {
  pluginOptions: {
    // 添加下面这段。src/style/globalValue.less为存放变量的路径＋文件
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/style/globalValue.less')],
    },
  },
};

起服务无报错忽略；有报错（cannot read property ‘srtle-resources-loader’ of undefined），就在 vue.config.js 中添加以下这段代码

pluginOptions: {
  "style-resources-loader": {
    preProcessor: "less",
    patterns: [],
  },
},

2.0 版本的解决方案

安装依赖 sass-resources-loader

npm i sass-resources-loader -D

安装完 sass-resources-loader 后,咱们还需要简单配置下 webpack 找到 build/utils.js 文件 在 cssLoaders 函数中添加使用全局 less 函数

function lessResourceLoader() {
  // 增加全局使用less函数
  var loaders = [
    cssLoader,
    'less-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          path.resolve(__dirname, '../src/style/_color.less'), //定义全局变量的文件路径
        ],
      },
    },
  ];
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
    });
  } else {
    return ['vue-style-loader'].concat(loaders);
  }
}

在 return 中用 lessResourceLoader() (代表的是你写函数所使用的名字,自己可以起任意名字) 替换之前 less 函数

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: lessResourceLoader(), // 替换之后
  // less: generateLoaders('less'), // 原webpack配置的
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus'),
};

操作完后记得重启，还有就是文件里面最好只写变量和函数，不做实际样式操作