vue-cli 2.*中导入公共less文件的方法步骤
在新版的VueCLI3中，如何导入公共less文件在文档里已经描述的很清楚了，但是在2.*的版本中，我没有查到相关的办法，网友的办法又相当复杂，于是我推荐给大家一个很简单的办法。
首先，会用到webpack中的资源预处理器StyleResourcesLoader，所以需要：
npmistyle-resources-loader-D
然后在build/utils.js文件中可以找到CSS预处理器的实现方式：
functiongenerateLoaders(loader,loaderOptions){
constloaders=options.usePostCSS?[cssLoader,postcssLoader]:[cssLoader]
if(loader){
loaders.push({
loader:loader+'-loader',
options:Object.assign({},loaderOptions,{
sourceMap:options.sourceMap
})
})
}
//ExtractCSSwhenthatoptionisspecified
//(whichisthecaseduringproductionbuild)
if(options.extract){
returnExtractTextPlugin.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文件的情况下，多加一种StyleResourcesLoader预处理器就可以解决问题，所以只要加上如下代码，即可实现。
if(loader){
...
}
if(loader=='less'){
loaders.push({
loader:'style-resources-loader',
options:{
patterns:path.resolve(__dirname,'../src/assets/config/*.less')
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。