Vue 样式的scope属性

作用： 让样式在局部生效，防止冲突
写法： <style scoped>
其实各个组件中的样式最后会被汇总到一起，如何解决css样式冲突问题？比如别人的组件和自己的组件样式冲突或者自己的组件写多了也容易产生冲突

1. scoped属性例子

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
import School from "@/components/School.vue";  // 背景紫色
import Student from "@/components/Student.vue";  // 背景黄绿色

export default {
  name: 'App',
  components: {
    School, Student
  },
}
</script>

运行效果： 说明颜色被覆盖了，Vue解析最后解析Student.vue, 解析顺序按照import语句书写顺序。 加上scoped scoped底层原理就是： 他在元素上面加上了特殊的标签属性，具体值每次刷新都会变, 起到页面上唯一性，Vue脚手架使用类选择器+属性选择器区分开了各个组件的样式

2. Vue脚手架处理less样式

默认脚手架不支持less语法，需要加入依赖less-loader 值得注意的是less-loader的版本，不能是最新的, Vue脚手架默认仍然使用webpack4.xx, webpack5已经出来了，less-loader不兼容webpack4了 查看less-loader的所有版本：

C:\Users\mi>npm view less-loader versions
[
  '0.1.0',  '0.1.1',  '0.1.2',  '0.1.3',  '0.2.0',
  '0.2.1',  '0.2.2',  '0.5.0',  '0.5.1',  '0.6.0',
  '0.6.1',  '0.6.2',  '0.7.0',  '0.7.1',  '0.7.2',
  '0.7.3',  '0.7.4',  '0.7.5',  '0.7.6',  '0.7.7',
  '0.7.8',  '2.0.0',  '2.1.0',  '2.2.0',  '2.2.1',
  '2.2.2',  '2.2.3',  '3.0.0',  '4.0.0',  '4.0.1',
  '4.0.2',  '4.0.3',  '4.0.4',  '4.0.5',  '4.0.6',
  '4.1.0',  '5.0.0',  '6.0.0',  '6.1.0',  '6.1.1',
  '6.1.2',  '6.1.3',  '6.2.0',  '7.0.0',  '7.0.1',
  '7.0.2',  '7.1.0',  '7.2.0',  '7.2.1',  '7.3.0',
  '8.0.0',  '8.1.0',  '8.1.1',  '9.0.0',  '9.1.0',
  '10.0.0', '10.0.1', '10.1.0', '10.2.0', '11.0.0',
  '11.1.0', '11.1.1', '11.1.2', '11.1.3'
]

建议安装less-loader的7.x版本, 其次是属性lang配置的话，如果配置上后里面不能为空。