scoped 样式

一、加不加 scoped ？

1. 加上之后，让样式在局部生效，防止冲突

<!-- a.vue -->
<style lang="less" scoped>
#bg-red {
  background-color: #f00;
}
</style>

2. 不加，相当于是定义的全局样式，每个组件都可以访问你定义的样式
3. 在 App.vue 的样式属性中就没有 scoped ，因为每个组件都要汇总到 App.vue 中，每个组件都可以访问 App.vue 上定的类样式

<!-- App.vue -->
<style lang="less">
.bg-yellow {
  color: #f00;
  background-color: #ff0;
}
</style>

4. 解决 vue 使用 less 版本问题

npm view less-loader versions 查看 less-loader 的历史版本
npm i less-loader@7 -- 安装 less-loader 7 版本
vue 使用的是 wabpack 4.46， less 7.x.x 支持； 而 less 9.x.x 是支持 webpack 5 的，所以要降版本使用

5. 样式属性没有指出语言 – lang=“xxx” 默认就是 css