00:00
好了各位,我们继续再说一个高级的配置,叫昂D自定义主题,我们观察一下页面啊各位,按钮一是不是我的主按钮?OK,有蓝色的背景对吧?按钮二呢,是一个一般按钮,或者说是一个普通按钮,有背景吗?没有。但是就算他没有背景,你看着鼠标放上去。诶,有一个高亮的效果,拿走,高亮消失,放上去,高亮出现,高亮什么颜色蓝色,这什么颜色蓝色,这儿呢蓝色,而且你注意观察,当我选一个日期的时候,什么蓝色,当我选一段日期的时候,深蓝色,浅蓝色,深蓝色对吗?所以说你不难发现,整个昂特地默认的主题颜色就是支付宝的那种蓝,哎,那个蓝色的,有些时候我们做项目呢,不想用它这个蓝色,你比如说啊,我这个项目呢,整体的主色调来,主题颜色想让它是橙色的。
01:01
那你怎么改啊?一个最笨的办法,你可以对按钮一进行右键审查元素,看看昂D到底加上了什么样的样式的类名,就把它变成蓝色的了,然后呢,你写一个同名的东西啊,然后呢,把它的颜色呢给它替换,你比如说人家写的是蓝,你写一个绿对吧,然后呢,就把你的那个样式呢,加到所有这些人的身上是吧。啊,包括这个呢,你也得右键审查,看看这一圈这个蓝色是哪个样式的类名在控制,然后一个一个一个往上加,理论上这样做是可以的,但是如果你真这样做了,会面临两个问题,第一个问题,哥们儿,你的工作量太大了。你写不完的那么多组件呢,那么第二个问题就是怎么的呢?有些时候你发现你写的样式根本覆盖不掉人家的样式,为什么呀,人家也加权重了,不让你去覆盖,所以说一个正确的解决方案的应该是这样的,我们去找到这个on d。
02:04
啊,然后呢,修改掉它底层的那个主题颜色的那个变量。同学昂D啊,他所有的样式啊,都是拿这玩意儿写的,就是最开始的时候,他所有的样式都是拿着lets写的啊,然后呢,他把lesss进行了一次编译,哎,就生成了什么呢,这个CSS,哎就给程序员去用了,所以说我们现在一个正确的解决办法应该是这样做的。去找到昂特地官方在Les文件里边所写的那个主题颜色,把那个颜色改掉,然后这样的话,这个lesss啊,最终它生成的那一堆CSS,我想问你那颜色是不是就都改掉了呀?哎,所以说我们要改的就是原文件这个lesss文件中的一个变量而已,你把这变量一改掉,那所有用到这个主题颜色变量的位置的颜色,那是不是就都改了呀?哎,好了,那怎么做呀?哎,回到咱们的这个文档当中,往下滚动,在这儿出现了同学叫自定义主题,诶自定义主题。
03:09
需要我们做的呢,得安装两个东西,一个是lesss,一个是lesss load啊,这也很好理解,因为人家底层是用lesss写的,你想改lesss相关的东西,那最终还得编译生成CSS,那你是不是得用lesss和lesss load啊,说老师我之前怎么没用呢?各位,之前你没用的本质原因是不用你去做这件事儿,把lesss变成CSS对吧?官方给你做好了,在那个Dis文件夹里边放好了,你直接引入就得了,但是现在你不知足啊,你想改呀啊,首先你改lesss就得安装lesss,你改完lesss得变异,那您就得安装lesss load,没得商量,把这一堆复制回到我们的项目当中。诶,终端里边把它粘进来走你。稍等啊,它呢,慢慢安装它的,回到文档里面,我们去看看文档里面怎么说好,我们看一下这两行呢,咱们已经知道了,红色的减号是不要的,哎,这个绿色的加号呢,是保留的,其实你大可不必把它删掉,然后再写这个,你上下打量一下同学,其实是不是就多了这么一个人呢?诶I的less load复制回到我们的配置项当中,把这个东西加在这个位置,对吧?好,我们回到文档里面再往下看。
04:34
他说这里边不要再写CSS了。对吧,各位,因为现在我毕竟不是说对CSS进行按需引入了,我要改less,把改完的less生成的那个CSS是不是做按需引入啊,哎,那所以说这块不要写CSS了,按照它的说法,应该写一个不尔值车回到配置项当中,这儿呢粘过来这么写你可就错了,不能写字符串的串,应该写一个布尔值串。
05:02
回到配置文档中啊,我们再往下看,他说你还得加一这玩意儿。诶,ID lesss loader,那同学,这个东西你就猜也能猜明白它是干嘛的了,专门用于解析lesss的,对吧?如果呢,大家之前好好的学过这个课,叫web pack,其实你知道这个loader是干嘛的了,这是一个最简单的loader了,对不对,配置项最少的一个loader了对不对?好,那我们需要做的呢,就是把这一堆呢给它拿过来,但是你要注意它放在哪儿,这个人和这个人之间对吧?来,右键复制回到配置项当中,那在这儿敲回车,把东西粘过来,所有的加号呢,要删掉好了,配置完了啊,缩进的调一调,让它对齐了啊走老师,这都什么意思呀,说一下。这一行代码的意思你听好了啊,各位是允许用JS去修改on d底层的Les文件,如果你不加11行这个允许啊,Javascript enabled,你不加这个允许你会发现啊,你修改主题颜色不起作用,人家不让你改。
06:13
啊,所以说这一行是一定得加上的,好,那再往下看,这这什么意思呀,读一读啊同学,Modify是不是有修改的意思呀,Modify words。无二是不是定义变量的关键字呀,所以说在这呢,就代表变量的意思,那么modify us就是代表着我要修改哪个变量,修改哪个变量啊,修改这个,那这变量是干嘛的呀?同学你听听这名艾福primary color主颜色。这个变量啊,同学,就是昂地底层在LIS文件里边定义的那个存储主题颜色的变量,哎,就换句话说。昂的底层在lights文件里边已经把这个变量写好了,而且颜色配的是一个支付宝的蓝色,那你在这儿呢,就得改成你想要的颜色,你比如说我改成橙色,说老师那这写单词也行啊,对,写单词啊啊写RGB啊这种颜色呀啊都可以的,好,那我这就写一个orange橙色好保存,那回到文档当中看他还怎么说啊,他说这里边呢,我们利用了less load的modify va进行主题配置,如果你想了解更多的这个参考,那你可以点一下这,哎,配置主题的这个文档对吧,里边就给你列了很多很多的配置项啊,不用去背啊,一再强调UI组件库,你可千万别背啊,如果你想背的话,你不如再去看看,Re,再去看看路由如何传参,把它记住对不对?好,然后他说修改后呢,请你重启,你如果看到一个绿色的按钮,就代表你成功了,那我们刚才改的不是绿色,我们写的是一个橙色的对吧。
07:56
那一会儿我们看看能不能有橙色的按钮呢,对吧?来回到我们的配置里边,同学来注意了啊Yan啊大尔塔启动一下,如果说你目前已经正在启动,那怎么办?你就把停掉啊,我刚才在录这个视频的时候呢,就已经把它停掉了,好了,Year start,来走起。
08:18
重新编译一下,看看可不可以啊,完全是按照文档走的对不对?哎,稍等一下啊。这个期间啊,同学,可能你的电脑的这个温度会比较高啊,这也正常,因为他要把那些Les文件呢,它启动的时候都要编译一下的啊,稍等诶同学注意了,报错了好,莫慌莫急,我们看看这个错误啊各位。来,首先呢,从第一行开始读啊,读着读着,哎,同学发现读不了,为啥呀,同学像这种东西啊,他报的是不是都是底层的错误呀?哎,同学你那么实在呀,你还真去not modus ont DES下的button,你还真找这家,同学不应该看这了,你说对吧?啊,这种问题呢,其实啊,咱这个说实在话,这就比较棘手的问题,同学你想啊,如果他报的是什么a is not DeFine啊,或者是不能从UN defend上读取什么东西,就至少啊同学我问一下,那还是我们编程所写的逻辑代码出问题了,我们可以去来检查一下,看一下自己哪写错了,你说对吧?但你觉没觉得同学现在报这错误啊,我们根本有点hold不住了,就是我们都分析不明白,他这东西到底是我配置写错了,还是说哪块丢东西了对吧。
09:39
说老师那这怎么办呀啊,那说一下同学像这种错误呢,前边这些行呢,就不太建议大家读了,你往下看,它说是什么validation arrow。什么验证错误,然后你再往下读options,就为啥说读这同学,这至少咱还能读明白,你说这吧,那那谁读这儿去,你说对吧,好,他说options是不是设置的意思呀。
10:04
有了一个未知的属性modify。也就什么意思呢?同学,我们从这句话这儿啊,我给大家放大一点吧,可能有些同学看不清了,对吧?来放大一点,同学就从这句话啊,咱说站在大家的角度考虑问题,我得这么说,就这句话我读完了,我觉得似乎好像告诉我这么一个事儿,就是个不能够读取modify vas这个未知的属性,就好像我的modify vas咋的,人家好像不认可,人家说没有这个配置项,对吗?但是我想问各位,这modify va我们是从哪复制过来的呀,我们自己写的呀,也没有吧,我们是不是也参考他这文档了?同学可能有一种情况就是单词你写错了,但是呢,我很负责任的告诉你,这单词咱没写错。老师,那怎么办呀啊,你再往后读啊,他说如下这些配置项呢,是被允许的哪些配置项啊,Less options啊,还有这个,还有这个这个这些是允许的。
11:06
说老师那什么意思,就是现在不能写这玩意儿了呗,啊对啊,那就是红色框这四个是允许写的呗,啊对。哎,说老师到底什么情况啊,那我跟你说一下啊,各位就是昂地官网上啊,它这个东西啊,是一个旧的写法。啊,但是现在呀,这个less loader呢,它更新了,它不再用这个配置了,你看他说的可明白了,他说这里啊,我们使用了less loader的modify va来进行主题配置,之前less loader是支持这个配置的,叫modify va,但是现在不支持了。哎呀,老师这怎么办呀,其实呢,同学,这就属于文档上的东西和这个less loader没有进行匹配,就说白了,文档里写的还是旧的用法呢,人less load那边怎么的人都更新了是吧,白说,老师那这怎么办呀,别急。
12:00
他是不是说这个属性是允许的呀?哎,那所以说呢,同学我们可以这样做,把这个东西复制来到我们的配置项里面啊,然后呢,你注意看同学I的less loader里面是不是传了一个对象啊。哎,接下来呢,我这么做瞧着啊各位回车,我把刚才他说的这个less option呢给它复制过来,让它的值呢是一个对象。然后我把这两个东西把它复制作为这个配置项里的东西,哎,啥意思呢?之前你是这么写的,I less load是不是传了一个配置项啊,这是key,这是value,这是key,这一堆是value,但是现在不是了,这个配置项里边只有一个key,只有一个value,这个value又是一组一组的key value,这样做就可以了,哎,那你可能说老师你是咋知道的呢?那同学说一下,首先根据这个配置来说,人家说这个可以,这个可以,咱一个一个试,是不是也行啊?还有就是同学,如果你真想,哎说老师我不想猜,我就想有人给我指条明路,那人不说了吗?这有一个配置主题的文档,你可以去参考,这个也可以。还有就是你仔细观察同学你发没发现less loader这玩意能点呀,你点击这个东西之后呢,那你看一下,其实呢,他就来到了less load的这个,诶get upb主页这。
13:26
里边呢,也有一些详细的解释,告诉你能写哪个配置,不能写哪个配置,同学你瞧吗?来瞪大你的眼睛看这个里边让你写mod five袜吗?不让,那让咱写哪个呀?是不是这个,那这个东西是不是还能再点呀,那你再点人家就告诉你了,这里边一共我能写多少配置,而且都是为谁服务的呢?赖哎,这问题不就好了吗?所以说回到我们的代码当中,那我们需要做的就是赶紧把你目前的这个项目停掉,清空一下,然后我们重新启动,这个时候不出意外的话啊,我们就能看到一个橙色的按钮了,所有的主题颜色呢,也就都是橙色的了,稍等啊。
14:08
稍等。哎,可能大家呢,会能听到我这个风扇转的声音是吧,它在编译lights啊,以后启动呢就能好一点啊,稍等好了,同学,虽然这颜色有点丑哈,但是我自定义主题是不是成功了呀,你看按钮二的呼吸颜色,包括这的呼吸颜色,包括点击选一个日期啊这种选选中的这个颜色是吧?而且包括这儿呢,哎,这些颜色是不是就都改掉了呀?哎,所以说同学这就是自定义主题啊,这里边呢,就有一个坑对吧,就是如果你完全按照官方的这个文档去走呢,那来往下往下往下自定义主题这块呢,它会有一个问题,就是呢,他不认识什么呢?这个modify a在哪呢?在这再往下找A自定义主题他不认识这个啊,需要我们做的呢,是在包一层对象叫做less options,其实啊同学就是less loader啊,这个玩意儿它升级了啊,功能更强大了,不像之前只能配置A很少的几项。
15:10
现在呢,是再来一个配置项,里边又是嵌套的一层对象啊,就这回事儿,也给大家呢形成了笔记啊,在read m里边来我们往下看啊,在这儿呢,给大家都整理好了啊,按需引入如何操作,自定义主题如何操作,而且我写的顺序呢,你注意看啊各位,我分了这么几步,一安装依赖,到底安装什么呢?这一套东西所需要的所有东西全都一次性安装,然后修改takeage.jason啊,然后在根目录下创建这个文件,我直接把这个文件内容的最终版给大家了,你直接复制过去就可以了,然后就是不要在组件里边亲自去引入样式了啊,就是这个东西应该删掉了,哎,那我们就完成了on d的按需引入加自定义主题,那这小节呢,我们停一下。
我来说两句