问题：如何在vue-cli工程中引入全局less、sass变量？

当使用 vue-cli 开发的时候，会使用一些全局配置，但是每当我们使用这些全局变量时，每个vue组件都必须导入该文件@import 'rem.less'，那得重复做这样的工作很多次，过程显得非常繁琐。

全局引入less方法：

1. 在package.json下检查是否有sass-resources-loader这个插件，如有则进行下一步，如没有，则进行安装：

npm install sass-resource-loader --save-dev

2.找到项目build目录下的util.js文件：

在exports.cssLoaders = function (options) { }.

里面添加方法：

function resolveResouce(name) {
 return path.resolve(__dirname, '../src/styles/' + name)
 }
 function generateLessResourceLoader() {
 var loaders = [
 cssLoader,
 // 'postcss-loader',
 'sass-loader',
 {
 loader: 'sass-resources-loader',
 options: {
 resources: [resolveResouce('rem.less')] // 需要一个全局路径
 }
 }
 ]
 if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader'
 })
 } else {
 return ['vue-style-loader'].concat(loaders)
 }
 }

3.然后修改util.js文件下的return下的less

return {
 css: generateLoaders(),
 postcss: generateLoaders(),
 //修改less
 less: generateLessResourceLoader('less'),
 sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
 stylus: generateLoaders('stylus'),
 styl: generateLoaders('stylus')
}

4.然后src/style/rem.less文件下的less变量或者mixin即可全局直接使用。