Vue_2 --- 全局样式和组件内局部样式

1. 类名冲突

所有组件中写的样式类名都会汇总到一起,由此可能会发生类名冲突,app.vue中的style标签一般写一些公共样式,本来就是给各组件用的,所以没必要写scoped

<style scoped>  /* 指定scoped属性来限制下面写的样式都是针对当前文件的,本质就是在最外层的div加了一个 dat-v-3232b0b8 的标签属性配合标签属性选择器来控制样式不冲突的*/

</style>

2. 使用less编写样式

2.1 Vue2的环境搭建

# Vue2 使用的是 webpack4,所以只能安装less-loader7来适配
npm i less-loader@7

2. 2指定编写less

<style scoped lang="less">
    .demo{
        background-color: aqua;
        .web{
            font-size:50px
        }
    }
</style>