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')
   }
  })
 }

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

赞 (0)

相关推荐

  • vue-cli构建项目使用 less的方法

    vue-cli构建项目使用 less的方法

    在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装. 第一步:安装 npm install less less-loader --save-dev 即通过npm安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用,所以就不将之记录在 dependencies 中. 第二步:在配置文件中配置 实际上如果我们通过vue-cli来构建项目,这一步

  • vue-cli初始化项目中使用less的方法

    什么是less? Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 引言 现在前端的vue框架越来越火,vue-cli作为vue项目的脚手架工具,是我们在开发中最最经常使用的.为了在vue项目中更好的管理我们的css文件,我们通常会引入less或者sass来帮助我们管理我们的css代码.那么,本文旨在记录如何在vue-cli初始化的项目中使用less来帮助我们更好的管理css代码. 下面话不多说了,来随着小编一起看看详

  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass

  • vue-cli如何添加less 以及sass

    vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了 npm install node-sass --save-dev npm install sass-loader --save-dev 如果是淘宝镜像直接运行cnpm是一样的效果 然后在组件或者视图中给样式加上语言就可以了 <style lang="sass" scoped> ..... </style> 这里需要说明一下scoped是让样式只在当前组件或者视图中

  • 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点. 引入bootstrap 1. 下载所需要的bootstrap文件. 将要使用的bootstrap文件放入src目录下的assets文件夹中. 2. 在入口文件src/main.js中引入bootstrap import './assets/boot

  • 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, load

  • ASP.NET Core中预压缩静态文件的方法步骤

    前言 Web应用程序的优化是非常重要,因为使用更少的CPU,占用更少的带宽可以减少项目的费用. 在ASP.NET Core中我们可以很容易的启用响应压缩,但是针对预压缩文件,就需要做一些额外的功能了. 这篇博客文章展示了如何在ASP.NET Core中预压缩静态文件. 下面话不多说了,来一起看看详细的介绍吧 为什么需要预压缩文件? 虽然在从服务器请求文件时, 我们可以动态压缩文件,但这意味这Web服务器需要做更多的额外工作. 其实只有在新的应用程序部署时才会更改要压缩的文件. 越好的压缩效果需要

  • vue cli webpack中使用sass的方法

    1:安装依赖 npm install sass-loader node-sass --save-dev 2:html中 修改style <style lang="sass"> /* write sass here */ </style> 3: 使用正常sass 语法 //但是会报错 <style lang="sass"> $highlight-color: #F90; $highlight-border: 1px solid $h

  • 在vue中读取本地Json文件的方法

    其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc

  • 在vue中使用公共过滤器filter的方法

    平时我们在vue中使用过滤器时,在模板中定义的过滤器不能在其他模板中使用,所以要在每个模板中定义自己的filter,这样就会出现很多重复的代码,那有没有办法定义一个公用的filter,减少代码的重复呢? 下面就给大家展示下使用最多且有效的方法吧! •首先在公用js中定义一个通用的filter.js,如下图所示,记得一定要把代码整个export出来 const vFilter={ numFilter:function (value) { // 截取当前数据到小数点后两位 let realVal =

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

  • 使用navicat导入sql文件的方法步骤

    一.打开navicat,打开连接,右击连接名(如果新建连接,需要使用对应数据库的ip地址和密码,本机的是地址localhost,密码是自己mysql数据库的密码),选择新建数据库,数据库名要和想要导入的文件名一样(这种情况针对的是sql文件是直接由整个数据库导出的一个sql文件,如果表导出的sql文件,应该是随便命名数据库的名字,表名应该是和需要导入的文件名字相同(第二种情况没有亲自试过)). 二.右击建好的数据库,选择运行SQL文件,在出现的页面中选择要导入的SQL文件.然后点击开始,等待导入

  • C#.net实现在Winform中从internet下载文件的方法

    本文实例讲述了C#.net实现在Winform中从internet下载文件的方法.分享给大家供大家参考.具体如下: 自己做了一个通用的软件自动升级程序,其中需要从给定的url下载文件到本地,共享一下. /// <summary> /// 下载文件 /// </summary> /// <param name="URL">下载文件地址</param> /// <param name="Filename">下载

  • python中解析json格式文件的方法示例

    前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等).这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成. 本文主要介

  • 在.net应用程序中运行其它EXE文件的方法

    本文实例讲述了在.net应用程序中运行其它EXE文件的方法.分享给大家供大家参考.具体实现方法如下: Process proc = new Process(); proc.StartInfo.FileName = @"D:\Program Files\Foxmail\Foxmail.exe"; //可以用绝对路径 proc.StartInfo.Arguments = ""; proc.Start(); 希望本文所述对大家的C#程序设计有所帮助.

随机推荐