文档章节

使用webpack+vue+less开发,使用less-loader,配置全局less变量

DiamondFsd
 DiamondFsd
发布于 2017/06/17 15:18
字数 1230
阅读 572
收藏 16
点赞 0
评论 1

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,在阅读这篇文章的时候,笔者假设你已经有了一定的less编码经验。以下将不会讲解less的用法。

我们在构建一个页面的时候,会定义一些基本参数,例如主色调,文字颜色,标题颜色,副标题颜色,字体大小等等。 通过统一的参数,可以保证页面整体风格的一致性。

在使用Vue模板进行开发的时候,我们把每个页面组件化,组件内的样式就写在组件自身的<style>标签内。 这时候我们需要引用一个变量,通常的方式是专门定义一个公共的variables.less 然后在每个需要使用这些变量的组件内,使用 @import 'xxxpath/variables.less';,主动引用的方式,来引入这些变量。

当组件少的时候还好说,当组件过多的时候,每次都引入就比较烦了。 最近在使用Vux-components这个组件库的时候,该作者提供了一个 vux-loader 来配合组件库的时候,可以按需打包使用的组件,以及支持全局less变量。

支持全局less变量,这个功能让我在工作中减少了很多重复的劳动力。 最近在构建一个pc端项目的时候,我就想自己研究一下如何使用全局的less变量。

less-loader

首先看看less-loader支不支持这样的功能,看了一遍文档后,发现并不支持。可是在看文档的过程中,有以下一段描述:

You can pass any Less specific options to the less-loader via loader options.
大意是,“你可以将less特有的配置通过 loader 的 options 参数传入 less-loader”

随后我就去翻查了 less 文档中的选项部分 Less - command-line-usage-options , 发现有以下选项符合我们的需求

Global Variable

lessc --global-var="my-background=red"

This option defines a variable that can be referenced by the file. Effectively the declaration is put at the top of your base Less file, meaning it can be used but it also can be overridden if this variable is defined in the file.

Modify Variable

lessc --modify-var="my-background=red"

As opposed to the global variable option, this puts the declaration at the end of your base file, meaning it will override anything defined in your Less file.

global-var 会将所传入的参数写入所有的less文件的顶部,我们可以在自己的less文件中重写这些参数的值
modify-var 和global-var 相反,会将所传入的参数写入所有less文件的底部,我们自己定义的变量会被覆盖

了解到了这些,我就在项目里做了一下简单的测试,less-loader 的文档中说,less 原生的选项都需要转换成驼峰式,然后传入 loader的options中。

loader: "less-loader", 
options: {
    globalVars: {
       'primary-color': 'blue'
    }
}

通过这样的配置,我发现,果然,我在全局都可以不需要导入变量文件,直接使用 @primary-color 这个参数在我的less文件中。

原生的选项和less-loader支持的选项,大部分只需要简单的转换为驼峰式即可,小部分略有不同,例如例子中写的 global-val 在loader的选项中是 globalVars 多了一个 's',所有的支持并且对应的选项名,可以在参考 lessc 源码。

配置全局参数

知道了如何传入全局变量,那么接下来就是解决如何方便的传入全局变量了。这里参考了 vux-loader 的实现,我将所有需要使用到的全局变量,存入一个 theme.less 中,大致内容如下。

@primary-color: #20A0FF;
@waring-color: #F7BA2A;
@success-color: #13CE66;
@danger-color: #FF4949;
@gray-color: #D3DCE6;
@mark-color: #E5E9F2;
@first-color: #1F2D3D;
@sencond-color: #324057;
@thrid-color: #475669;
@font-size: 14px;
@font-color: @first-color;
@global-padding: 15px;

然后,解析这个文件,将这些参数转换为 {key:value}的格式,最后传入 less-loader中就可以了。 因为偷懒,所以直接将 vux-loader 中的 get-less-variables.js 拷过来使用了。

const fs = require('fs');
module.exports = function getLessVariables(file) {
    var themeContent = fs.readFileSync(file, 'utf-8')
    var variables = {}
    themeContent.split('\n').forEach(function(item) {
        if (item.indexOf('//') > -1 || item.indexOf('/*') > -1) {
            return
        }
        var _pair = item.split(':')
        if (_pair.length < 2) return;
        var key = _pair[0].replace('\r', '').replace('@', '')
        if (!key) return;
        var value = _pair[1].replace(';', '').replace('\r', '').replace(/^\s+|\s+$/g, '')
        variables[key] = value
    })
    return variables
}

因为项目是用 vue-cli 搭建的,预处理器的样式都在 build/utils.js中, 将读取出来的文件,传入这个方法,就可以在所有的组件中使用全局定义的那些变量了。

less: generateLoaders('less', {
  globalVars: getLessVariables(config.themePath)
}),

到这里,大部分功能以及完成了,但是有点不足的就是,如果要修改存放全局变量的less文件,必须重新启动项目才能实现效果了,不能实现热更行。 但是vux-loader实现了修改全局变量less后,可以自动重新编译的功能。

这点等我有空再来研究如何实现的。

希望这篇文章对大家有帮助。

© 著作权归作者所有

共有 人打赏支持
DiamondFsd
粉丝 85
博文 15
码字总数 16372
作品 0
深圳
程序员
加载中

评论(1)

奥道易通短信平台
奥道易通短信平台
没人顶啊?
Webit Script 1.4.0 发布,支持 JSP TagLib Function

Webit Script 是一个简单灵活自由开放的开源的模板引擎,基于Java开发,支持Java5 及以上版本,采用BSD开源协议。 本次更新同时附带了一个tools包: webit-script-tools-1.0.0.jar 包含了一些...

zqq90 ⋅ 2014/02/09 ⋅ 15

开源一年,VUX@2.X 发布

VUX@2.X 更新 从 2.0-2.1 版本,大概做了这些事: Vue 升级到2.x vue-router 升级到2.x vuex 升级到2.x webpack 模板升级到webpack@2.x WeUI 升级到1.x 新的官网,更详细的文档(还在逐步完善...

airyland ⋅ 2017/02/22 ⋅ 15

React+Redux+Webpack构建开发单页应用环境

webpack 基础 安装 webpack 作为全局变量安装 作为项目依赖安装 webpack 简介 webpack 的配置项主要包括以下几点: entry: 入口,定义要打包的文件 output: 出口,定义打包输出的文件;包括路...

秋风暮霞惋红曲 ⋅ 2016/12/23 ⋅ 0

值得了解的webpack高级技能

在只要这几步,webpack速成不是事儿一文中, 笔者简单介绍了webpack的常见用法。能满足最基本的开发需求。在这篇文章中,再来谈谈一些较高级的应用。 1. 配置不同环境的构建脚本 之前构建都是...

yiliwei ⋅ 05/07 ⋅ 0

搭建 Webpack+Vue+vuex+vue-router 项目

找了很多 vue+webpack 构建的文章 感觉这个还是很不错的,简单易懂还有代码实例。 源码链接:http://git.oschina.net/hwhao/webpackvue_tutorials 原文链接: https://github.com/varHarrie/...

KO小君 ⋅ 2017/04/27 ⋅ 0

妈妈再也不用担心我不会webpack了2

前言 之前写了一篇妈妈再也不用担心我不会webpack了,这次继续对其进行补充。本文依旧是遵循直观易懂的规则进行书写。希望对大家有帮助。如果不太熟悉webpack可以先看看之前的文章妈妈再也不...

尼古拉斯李三 ⋅ 2017/11/27 ⋅ 0

webpack 之 loader 和 plugin 简介

作者介绍:赵鹏,美团点评点餐团队成员 webpack是一个模块打包器(module bundler),提供了一个核心,核心提供了很多开箱即用的功能,同时它可以用loader和plugin来扩展。webpack本身结构精...

美团点评点餐 ⋅ 2017/08/01 ⋅ 0

webpack之loader和plugin简介

webpack是一个模块打包器(module bundler),提供了一个核心,核心提供了很多开箱即用的功能,同时它可以用loader和plugin来扩展。webpack本身结构精巧,基于tapable的插件架构,扩展性强,...

终端技术 ⋅ 2017/08/01 ⋅ 0

webpack初体验

Webpack最近貌似很火啊,所以挤空学习掌握了一下,主要最近打算做个自己的网站,后端用node+mongodb,所以没什么时间 Webpack是一个模块打包器。它将根据模块的依赖关系进行静态的分析,然后...

邪气小生 ⋅ 2016/10/24 ⋅ 0

一篇就让你学会webpack4

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,目前最流行的打包神器,接下来聊一下webpack4 首先webpack4要求node版本在8.5以上,cmd中node -v查看node版本。 1.什么是webpack...

正儿八经的娇娇 ⋅ 05/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 9分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 11分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 15分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 21分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 22分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 52分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 8

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部