scoped 仔细看
英[skəʊpt] 美[skoʊpt]

组件加 scoped 之后，里面缩写的样式只负责本组件。

scoped样式的实现原理：
在 最外侧 div 添加了一个 data-v-随机数属性，

scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>
3. 注意：app组件不适合用 scoped。
   因为一般在app组件里写的样式，都是想适合所有子组件使用。

源码

|   App.vue
|   main.js
|
\---components
        School.vue
        Student.vue

School.vue

<template>
    <div class="demo">
        <h2 class="title">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name:'SchoolVue',
        data() {
            return {
                name:'尚硅谷atguigu',
                address:'北京',
            }
        }
    }
</script>


<!-- 我们在 vue组件中写的样式，最终都被汇总在一起。此时容易出现一个问题：样式名冲突。 为了解决这个问题： 添加 scoped，表示其中的样式只负责本组件 -->
<style scoped>
    .demo{
        background-color: skyblue;
    }
</style>

Student.vue

<template>
    <div class="demo">
        <h2 class="title">学生姓名：{{name}}</h2>
        <h2 class="atguigu">学生性别：{{sex}}</h2>
    </div>
</template>

<script>
    export default {
        name:'StudentVue',
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        }
    }
</script>

<!-- style 虽然支持 less语法， 但是如果脚手架提示无法处理less(Can't resolve 'less-loader')，那么就需要安装： 
 npm i less-loader
 如果安装过程中出错，那么就是版本的问题。
 目前发现 webpack 4.46.0 相对稳定，所以建议安装 less-loader v7.3.0

 less语法的特点：可以嵌套写。

<style lang="less" scoped>
    .demo{
        background-color: pink;
        .atguigu{
            font-size: 40px;
        }
    }
</style>

如果不写 lang="less" ，默认就是css
 -->
 <style scoped>
    .demo{
        background-color: pink;
    }
</style>