解决或使用vue的less全局变量

在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')
  }

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

解决或使用vue的less全局变量

推荐阅读