00:02
好,我们接下来呢,来进行第一步,我们来处理一样式资源。样式资源呢?我们有CS,有less,有SARS,有有S,还有两种写法,还有S等样式资源,我们接下来要学习一一处理它们。我们先学习如何处理CSS。那么这里呢,还是要提到一个点啊,我本身呢,只能识别JS的资源,不能识别样式资源。所以我们需要借助加载器load来帮助派识别这个字源才能,它才能够去变异。那么logo到底怎么用,要怎么去看呢?哎,我们永远建议去官方文档中找。当你对这个东西不熟的时候,一定要去看官方文档,官方文档永远是学习的最佳的东西。好,当然爷写漏的官方文档找不到的话,那么就要去社区,比方说中去找。那么这里呢,我填了一个官方文档,到时候我们可以看一下。那么这里呢,我会大家去一步步走一下,看怎么去官方文档中找东西,又怎么去找到相应的load,又怎么去使用,我会大家一步走。
01:09
当当我们这个流程一旦熟悉了之后呢,诶大家就可直接看我的教程对吧,因为看教程省去你找的过程会更加方便。但是我们说啊,是授之以鱼不如授之以渔。就是教给你最终的一个内容,还不如告诉你一个良好的学习方法。所以学习方法更好的,永远都是看官风的。因为咱们现在讲的是WIFI5版本,可能未来还有WIFI6 WiFi7,那么这些版本下呢,可能有些东西发生了变化。对吧,那么你看我的文档,可能只能看到这个版本。但是你看官网的,官网永远都是与时俱进的,你能够接触到最新的最新的东西,所以看官网打是最方便的。好,我们一起来看,首先呢,你找到派,我们这里呢,有个派D中文文档。
02:00
那么在这里。它有一个load,这是we派官方推荐的一些load,哎,比较好用的load在这里就会找到。好,那么load的这个目录呢,在这里有一个logo的整体的一个目录,右边就是load的一些介绍。其中第一个第一个这个介绍呢,就是啊,大概整体介绍了一下啊,咱们下面的logo有哪些,他大概是做什么事的。就是这个,那么我们呢,就不一个看了,其实对于一个新手来下,你应该把这些东西呢,大概看一下啊,知道哪个logo大概是干什么用的,大概有个印象。当你比较熟练了,你直接找找关键字就好了,我们现在要处理CS,那么我要找的就是这个CS的,诶,就是你。那么在这里呢,他就会对slo呢做一些介绍,怎么用好,从这里开始快速开始去用。他说我们要用的版本呢,是外派五这个版本没错啊,然后首先呢,你需要安装这个C的,然后呢,你要用上你这个CS这个资源,然后呢进行外派configu这个配置,在rules里面进行这个对象这样的配置。
03:09
好,那么我们接下一步步来啊,不着急,我们先把这个CC创建好,我们先用一下它。我们先测试一下,看下外派到底能不能识别CCS资源,如果不能识别,诶,我们再回过头来来处理这个,来使用这个C。来一起看啊,不着急,这个文档我先放着啊。我们现在S下面新建一个文件夹叫CS。在这下面呢,我再新建一个资源。叫啥名字不重要。里面写的内容呢,我就剥吧。宽100PS,高100PS,然后给它一个背景色带光的看了。啊,给他一个粉色。好了,我写了一个这样的三元。然后呢,我使用mini注意啊。我们写的任何资源都需要引入才会打包,如果你呃,这个写的这个资源你没有引入,注意它是不会打包的,相当于白写了。
04:08
对吧,因为它解析打包的时候,他会发现,诶,它会以这个文件作为入口开始解析,发现你引入了count,引入了sum,所以这两个文件也会被打包进来,但是你没有引入样式,样式就不会被打包进来,所以这一点要注意一下。我们要想外派的打包资源。对吧,必须引入该资源。必须以后。所以我们需要引入,那么样式呢?我们只需要引入,引入的目的是为了让它打包,不需要去定义变量,去接收它,所以我们直接引入即可。第一变量接收我这里也没法用,因为样式是给HM用的,是给动物元素用的,不是给我们GS用的,所以这里呢,我们只引入,引入的目的是为了让外派打包它。好,但是注意看啊,我这里没有写任何的配置啊,我们去运行IPA的指令。
05:05
好了,这个时候就能看到变异失败了。对吧,成功的标志是一个绿色的,失败的标志是个红色的error。所以大家看到编译失败,那么就没有意义了,我们去检查那个,它就不会有输出了。他他会说什么呢?呃,错误在哪里呢?大家看仔细看一下错误,错误虽然是英文的,但是建议大家去好好看一下,他会告诉你是哪个文件出问题了,是这个index出问题了啊,第一行就出问题。出什么问题呢?模块解析失败。不认识的标识符,你可能需要什么呢?一个loader去处理这样的文件类型,诶,他都告诉你了,你可能需要一个load去处理这样的文件类型,因为we不能识别这些文件类型。然后错误的第一行,他也把这个打印出来了,就是这行代码它不能识别。
06:01
好了,所以这里我前面侧面印证了前面的内容,就是我们派呢,它默认只能处理JS文件,遇到样式是没法处理的。好了,那么下面我们就要加载logo的配置,来让它处理咱们的这个啊样式资源。回到刚刚的文档啊,在这里呢,他就告诉你了需要去做什么事,首先你需要下载CS。下。下载它,OK,下载完成,然后呢,你引入一个C文件,这一点我们不需要做了,因为我们已经引入过一个我们自己写的C文件了,好,然后呢,在Rose里面写这些配置。注意看啊,我呢,别的东西因为我已经写过了,所以我就没复制了,我只复制这个rules数组里面的这个对象,这个对象呢,就是load的配置。好,复制到我们这个里面来就好了。来看啊,这个I呢可以不用。
07:00
它呢,有两个字段,一个叫test,一个use。Test,意思就是它会检测。查杀文件。就是只检测某些文件。点CS结尾,多乐福就是以什么结尾,这个是个转移,把这个点进行转移,整体连起来,就是检测这个点CS结尾的文件。也就是说,只有点S结尾的文件才会使用下面这个规则对它做处理。所以T呢,就是你你这个logo配置想要对哪些文件生效,就要在test这里面写个正则,告诉他检测哪些文件就好了。Use呢,就是一个使用什么去处理。Us,这里面用了两个load,它的顺序啊。那两个楼的呢,我把它换个行啊。柚子呢,执行顺序。是从右。
08:00
到左,或者从下到上。他不是先执行三的啊,它是先执行再执行的,然后最终处理好的这个三。那么这两个load有什么用呢?我们分别介绍一下save load呢,它能够将这个咱们的样式啊。编译成一个common的模块。然后到JS中,也就说它会把这个CS代码编译到JS里面,那么编译的时候,它会把它变成一个common,符合common JS模块化的一个一个模块变异到JS里面。所以这个代码,所以CS资源呢,最终就打包到GS里面去了。好style波就是将JS中的C通过创建style标签的形式。然后呢,显示在页面上。添移到H10没问题中,然后生效,让样式生效。
09:07
三呢,简单来讲就是动态创建CE标签,把样式呢啊生效。C呢,就是把CS打包到JS中。就是,所以它必然是先把CS打包JS中,那么它才能从JS中找到你的样式,然后让其生效的。OK,那么其实这样配置就好了,但是现在我们肯定会存在一个小问题。这也是WiFi文档的一个通病,我们来运行一下。按两次上回到我上上个指令运行。这时候他报错了。还是一样报错呢,它报错的内容很长,但是我们永远是从上看到下,因为错误的前几行是最关键的,后面的其实意义不大。他说man杰S报错了,说模块没有找到什么呢?Cannot download in,什么什么什么。
10:02
那么这种错误不知道同学们之前有没有遇到过啊?那么希望你将来遇到的知道是什么原因,他说keyno不能够解析三的意思就是。这个包没有下载我们看嘛。我们这里呢,它要求用的是两个load的3LOAD和c load2个load,但是官网呢,让我们下的时候,只让我们下c load的,没有让我们下sal load,所以有一个load没有下,所以就会报错啊,所以我们要想解决这个错误,我们还需要把这个style load给下一下。那么这个就是PE的一个文档的一个通病。他没有把需要下载的所有依赖在这里列举,所以你在用的时候,你要观察一下,就是第一个他用了多少个load,你就得下多少load,一般来讲是这样的。其次,如果你真的不记得了,没关系啊,通过报错我们也能看到他说knoo什么什么什么,那就说明这个东西没有下。
11:06
他在官网中没有标注,但是一旦报错,你也甭管什么,你就下就完事了。下就完事了,你不用去管它文档有没有写,你就下就OK了。好了,所以呢,这里就是解决这个报错啊,以及。OK,这个包,这个包下载下来之后呢,我们再打包就可以了,诶编译就成功了。成功了之后呢,我们能看打包的文件还是没有这个CS文件,因为CS打包到GS里面了。CS打不到GS里面了,所以我们只要打开这个浏览器,就能看到这个CS代码。它会动态创建Excel标签。诶,你看动态创建style标签插入到页面上,所以页面就有这个标签了,为了让这个样式能在页面中有更好的体现呢,我在这里准备一个动脉容器,我就叫BOSS1。
12:04
好诶,你看这样呢,它就有显示了啊。好了,到这里呢,我们就学习到了如何去处理三资源,我们再一起回顾一下。首先你要处理什么资源,你得去创建一个这个资源,并且呢,要在这里引入它才会被打包。OK,那么如果你直接去打包的话呢,会报错的,因为外派默认是不能处理三次源的,怎么办呢?我们要如果遇到了外派不能识别的资源,我们都要配置load去处理,所以去派官网找到load的配置,那么你要处理什么load,就要去找相应的load啊,我们找到s load。然后按照官方文档的方式去下载,去下载,下载这个依赖,然后呢,再进行依赖配置,那么重新打包即可。只是在下载的时候你要注意啊,如果他是用了几个包,你都要下几个包,所以这里要稍微注意一下。
13:03
当你配置完成之后,只要你重新打包诶,即可看到它的一个效果。所以最终呢,我们还写了1.hl代码,为了让样式呢能在HM页面中体现,所以我们最终写了点啊这个结构。好了,以上呢,就是打包样式的内容。整个流程呢,第一次写的话呢,会比较麻烦,所以大家一定要耐下心来慢慢的去写哈,只要你写完了第一个,那么我们会发现后面的就简单了。好了,这里呢,就是外派的一个处理样式的用法了。
我来说两句