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

2019-11-19 12:29:10

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：Vue.js组件间通信方式总结【推荐】

下一篇：vue全局使用axios的方法实例详解