scope
限制css的作用范围
用法
<template>
<div class="demo">
<h2 >学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男'
}
},
}
</script>
<style lang="less" scoped>
.demo{
background-color: pink;
.atguigu{
font-size: 40px;
}
}
</style><template>
<div class="demo">
<h2 >学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京',
x:666
}
}
}
</script>
<style scoped>
.demo{
background-color: skyblue;
}
</style>App组件
App组件的style一般不加scope限制范围，一般写在App组件里的style对所有组件生效
style lang=“less”
要使用less，需要安装less-loader
npm view webpack versions --查看webpack的所有版本
npm view less-loader versions --查看less-loader的所有版本
npm i less-loader@6 --安装6版本，安装其它版本，运行不起来安装其它版本报错不兼容
