要点:
先引入两个组件
平常我们这样写样式再School组件上写
但是组件中各写的样式会被汇总在一起,也就是如果两个组件中写了相同class命名的样式就会有冲突
验证:
再在student组件上也写入demo的样式
运行发现样式被覆盖了
因为在app引入子组件的时候,先引用的是蓝色背景色的school组件,然后是橙色背景色的student组件,当引入student组件的时候把相同名字样式给覆盖掉了,所以最后才显示了只有橙色
验证:是被覆盖了
换一下引用的顺序
不是看使用的顺序而是看引用的顺序
因为vue的cli脚手架的话,是先看引入在看配置对象,最后才看body里面内容
解决方法:
在style上加一个scoped 表示这个样式只用于这个组件,就不会导致最后组件间样式的覆盖了
就是把这个style样式限制住了
发现页面显示正常
分析怎么实现的它在div上加入一个特定的标签属性,而且后面的数字是唯一的,然后样式名demo和这个标签属性组合,就形成了一个独一无二的样式名,就不会被覆盖了
但是在有一个组件上用scoped不太好就是在app组件上它是一个一人一下万人之上的角色
如果在app组件里定义一个样式
然后在其他组件中都可以添加这个样式
在两个组件中都写上
都有样式,这是没有加scoped的时候
但如果在app的style上也加上scoped的话
会发现样式就没应用了,也就是说只有app.vue里面才能使用app的样式了
但是一般开发时,在app里面写的样式都是很多组件会重复使用到,所以一般在app里面都不会加scoped
然后
这个lang时langue的简写,表示用什么形式去写这个样式有less 和css两种
但是如果你没装less-loader就会报错,因为脚手架创建项目没有配置能识别less
安装
但是发现报错
这边是一个兼容性的问题
我们知道脚手架是依托webpack的,现在webpack版本有5版本了,但是vue的脚手架安装的是
4的最新版本
因为less-loader如果直接npm i less-loader的话,就会安装less-loader的最新版本,也就是8 和9版本但是8和9版本是迎合webpack5版本的所以你用在脚手架中直接装less-loader就会报错
用这个指令就能看对应有什么版本
所以不要安装8也不要安装9 因为这是迎合webpack5的
所以使用 npm i less-loader@7
表示安装less-loader7版本里面的最新版本
安装成功
发现写less也不报错 ,less可以嵌套着写
不写lang的话默认就是css
总结: