准备

先写一个最简单的页面

再给其分别加一个背景色
但是如果两个的类名一样，都是demo
就会出现这样
至于为什么以MyStudent为主，是因为后引入的是它，把前面覆盖掉了

作用：让样式再局部生效，防止冲突
写法：

为了解决上面这种情况，我们可以再style标签加一个scoped
这样就解决了
但是App组件一般不用scoped，因为如果你加上scoped，MySchool和MyStudent组件还是能使用
用不用都一样所以App组件的样式是所有组件通用的

scoped的快捷键是这个

lang

而第一个选项是lang,它的全称是language

里面可以填css(不填的话它的默认值也是css)

脚手架可以编译css语言

由于脚手架处理不了less，它会报错

那么我们就要下载less，首先按快捷键Ctrl+C，停止运行

然后运行npm i less-loader

这样就是下载成功

如果发生报错，说明你的webpack不是5版本

你的webpack可以在node_modules上找

因为less loader 下载的是最新版本，最新版本是为webpack5服务的，所以如果你不是webpack5就会报错

执行npm view webpack versions命令可以查看webpack有哪些版本

执行npm view less-loader versions 命令可以查看less-loader有哪些版本

less-loader的8、9版本都是为webpack5准备的，所以最好在less-loader的6、7版本选择。 如果下载的是less-loader7版本，其执行的命令是npm i less-loader@7

这样就是安装成功了

less最大的特点就是样式可以嵌套的写

总结

本小结主要用到的代码如下：
MySchool.vue

<template>
  <div class="demo">
    <h1>学校名：{{ name | mySlice }}</h1>
    <h1>学校地址：{{ address }}</h1>
  </div>
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "MySchool",
  data() {
    return {
      name: "南大pppggg",
      address: "南京",
    };
  },
};
</script>

<style scoped>
.demo {
  background-color: orange;
}
</style>

<template>
  <div class="demo">
    <h1 class="dem">学校姓名：{{ name }}</h1>
    <h1>学生年龄：{{ age }}</h1>
  </div>
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "MyStudent",
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
};
</script>

<style lang="less">
.demo {
  background-color: pink;
  .dem {
    color: red;
  }
}
</style>