vue-cli 2.*中导入公共less文件的方法步骤

在新版的vue cli 3中，如何导入公共less文件在文档里已经描述的很清楚了，但是在2.*的版本中，我没有查到相关的办法，网友的办法又相当复杂，于是我推荐给大家一个很简单的办法。

首先，会用到webpack中的资源预处理器style resources loader，所以需要：

npm i style-resources-loader -d

然后在build/utils.js文件中可以找到css预处理器的实现方式：

 function generateloaders (loader, loaderoptions) {
 const loaders = options.usepostcss ? [cssloader, postcssloader] : [cssloader]

 if (loader) {
  loaders.push({
  loader: loader + '-loader',
  options: object.assign({}, loaderoptions, {
   sourcemap: options.sourcemap
  })
  })
 }

 // extract css when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return extracttextplugin.extract({
  use: loaders,
  fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
 css: generateloaders(),
 postcss: generateloaders(),
 less: generateloaders('less'),
 sass: generateloaders('sass', { indentedsyntax: true }),
 scss: generateloaders('sass'),
 stylus: generateloaders('stylus'),
 styl: generateloaders('stylus')
 }
}

简单的看下来就是需要哪种类型的样式就去加载对应的预处理器，因此只需要在加载less文件的情况下，多加一种style resources loader预处理器就可以解决问题，所以只要加上如下代码，即可实现。

 if (loader) {
  ...
 }
 if(loader == 'less'){
  loaders.push({
   loader: 'style-resources-loader',
   options: {
    patterns: path.resolve(__dirname, '../src/assets/config/*.less')
   }
  })
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。