当前位置:Gxlcms > JavaScript > vue-cli 2.*中导入公共less文件的方法步骤

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

时间:2021-07-01 10:21:17 帮助过:4人阅读

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

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

人气教程排行