vue 脚手架 scoped样式

要点：

 

先引入两个组件

 

平常我们这样写样式再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

总结：