vue-cli2配置less，全局引入

1.安装依赖

// 使用less
npm i less less-loader -S

// 全局引入less
npm i sass-resources-loader -D

2.项目根目录/build/webpack.base.conf.js, module变量中的rules添加

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
}

3.在.vue页面使用

4.全局引入less文件

在项目根目录/build/utils.js, 找到 cssLoaders方法，添加函数

function lessResourceLoader() {
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [ // 这里为less文件路径
            path.resolve(__dirname, '../src/assets/css/common.less'),
            path.resolve(__dirname, '../src/assets/css/animation.less'),
            path.resolve(__dirname, '../src/assets/css/icon.less')
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

最后将cssLoaders函数的return中的less修改

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

ok，搞定