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

 更新时间:2018年11月22日 14:49:21   作者:Callas  
这篇文章主要介绍了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')
   }
  })
 }

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

相关文章

  • vue3中require报错require is not defined问题及解决

    vue3中require报错require is not defined问题及解决

    这篇文章主要介绍了vue3中require报错require is not defined问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue+canvas实现水印功能

    Vue+canvas实现水印功能

    实际项目中偶尔会遇到给项目页面背景加水印的需求,这篇文章主要为大家介绍了Vue使用canvas实现水印功能的示例代码,希望对大家有所帮助
    2023-07-07
  • vue 项目中实现按钮防抖方法

    vue 项目中实现按钮防抖方法

    这篇文章主要介绍了vue 项目中实现按钮防抖方法,首先需要新建 .js文件存放防抖方法,引入防抖文件,methods中添加方法,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue实现单一筛选、删除筛选条件

    vue实现单一筛选、删除筛选条件

    这篇文章主要为大家详细介绍了vue实现单一筛选、删除筛选条件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    这篇文章主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue项目之webpack打包静态资源路径不准确的问题

    vue项目之webpack打包静态资源路径不准确的问题

    这篇文章主要介绍了vue项目之webpack打包静态资源路径不准确的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue.js引用背景图background无效的3种解决方案

    vue.js引用背景图background无效的3种解决方案

    这篇文章主要介绍了vue.js引用背景图background无效的3种解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue实现简单图片上传

    vue实现简单图片上传

    这篇文章主要为大家详细介绍了vue实现简单图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    这篇文章主要介绍了Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 使用vux实现上拉刷新功能遇到的坑

    使用vux实现上拉刷新功能遇到的坑

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧
    2018-02-02

最新评论