00:00
好了各位,那接下来呢,我们说一个小点叫样式的模块化,为什么要说这个呢?我们打开hello组件,打开welcome组件,同学你注意观察啊,这是谁的样式啊,Hello的,因为它放在hello里了,我写了一个样式的类名叫title,对吗?刚刚我在写代码的时候,我非常自然的就在welcome这个组件里啊,把这个样式的类名给换了,叫DEMO。同学,你说如果呀,它也叫title,而且你写welcome样式的时候呢,还真叫title,你说这会有什么问题呢?我们冷静的思考一下,如果是说作为hello来讲,他说了title是橙色的,对于welcome来说呢,他说title呢是蓝色的。那大家你想啊,这是hello的样式对吗?引入到哪里去了呀?Hello的这个点JS叉里面,那我再问你这个index.js叉,Hello的这个组件最终是不是被引到APP里了,那同学同样的那些套路,那你说最后welcome的样式,还有hello的样式是不是都汇总到了这个APP里面啊,也就是说最终这一些人是都放在一起的,对吗?那你觉不觉得样式就冲突了呢?
01:18
听welcome的,它是天蓝色,你听这个hello的呢,到这儿它是橙色,那你说最终它是橙色的还是蓝色的呢?对吧?样式冲突了嘛,那你看一下效果,由于你是后引入的welcome,那就是后引入的样式就把之前的样式给覆盖掉了,所以说他就听谁的了呢,Welcome。所以说这个时候打开终端启动一下脚手架,你看啊,那两条文字都是天蓝色的,注意观察,控制台呢,我也给你打开。等着它启动是不是都是天蓝色的,那你就把hello的样式就给搞丢了吗?哎,正是因为有这个问题,所以说我们要做样式的模块化,那怎么做呢?同学说一下啊,也不是说必须要做,如果以后你编码的时候,同学们保证这些东西它不冲突,或者说呢,你这样做,同学这不是点title头吗?如果说后期你写那种lesss文件的时候,你可以在最外侧给它来一个点儿hello,对吧,然后里边再写上点title,同学lesss文件是不是能这么写呀?
02:28
对吧?能产生嵌套吧,那这样的话,同学这个title就不会跟这个title产生什么冲突,因为这个title是hello里的title对吗?那如果你要不这么写,我就想直接写title呢?那为了避免这个样式的冲突啊,我们还可以有另外一种做法,大家注意观察,我刚才在hello组件里边是不是直接引入样式,同学我可没这么写,引入什么什么什么啊,然后是from什么什么什么,对吧,我可没这么写。我是直接就引入这个CSS,对吧?如果你之前学习过webpa,对这种写法你一定不会陌生的,但如果说web你没学,你可能觉得,诶老师样式是吧,还觉得挺新奇的,那我说一下样式也能做模块化,怎么做呢?需要你做两个事儿,一,你不能直接叫什么什么什么点CSS,我不管你之前写的多长,一定在你的名字和点CSS之间再给它来一个叫做module,也就是说我要把这个文件改成index.module.css必须得加上这个叫做module,你这么一加呀,肯定会有一个问题,就是你的CSS是不是改成这名了,那你这呢,还引入这个家伙呢,那不对,说老师那明白,那就是module.css。
03:48
同学,你要这么写呀,那就是这块换个名,这块换个名没什么意义啊,所以说呢,同学,如果你的CSS文件中间加了Mo这个关键词,你就可以这么玩了,Hello from,哎,你就直接能用东西给它接住了。
04:07
然后呢,所有hello相关的样式都保存在这个hello对象里了,如果你想写title,别直接写,咱换方式叫做hello点儿title,你这样的话就不会跟这个产生冲突,那回到页面呢,你去看一眼来,我们刷新走对吧,都叫title,但是呢,哎,他们之间不产生什么影响,所以说也是可以做样式的拈化的啊同学说一下啊,这个样式的拈化呀,其实做的不是特别多啊,不是特别多,因为一般呢,我们用lesss写,形成那种那种嵌套关系之后呢,你就想同学hello下的title和welcome下的title,它不产生啥冲突,但如果说你直接写CSS,有的时候你就可以,哎,需要做一下这个样式的模块化。啊,2.1,这得加个module,这儿呢,得拿一个变量给它接一下,而且接完了之后自动能帮你整理成对象,你直接hello点儿,直接写里边的类名就可以了,OK,好,那这一小节呢,我们停一下。
我来说两句