Vue：scoped

scoped

vue文件有style标签来让我们编写样式，但是会存在一个问题：

如果一个父组件中同时用到了多个子组件，最终编译后产生的css是会被汇总到一起的。比如说子组件A对.demo进行修饰，然后子组件B也对.demo进行修饰，那最终结果听谁的？

为了解决样式冲突的问题，可以在style标签上加个属性，如下：

<style scoped>
</style>

lang

在style标签上还有个属性lang，是用于指定编写样式的语言，比如css，less，scss等等，当指定了样式语言，标签内就要以此语言语言进行编写。但有个注意的点，除了css，其他样式语言都必须要安装与webpack兼容的插件才能解析，比如less，就得安装less-loader

<style scoped lang="css">
</style>

<style scoped lang="less">
</style>

<style scoped lang="scss">
</style>