我们之前写的App.vue也好，组件也好，这些以.vue结尾的文件叫做vue单文件组件
在.vue文件中，template和script中我们都写了一下代码了，唯独没有怎么理会style标签，这节课中我们介绍一下
1.scoped
在style标签上可以添加一个scoped属性，表示这个style标签里面的css只会应用到当前的组件上，
<style scoped>
.example {
color: red;
}
</style>
我们来写一个例子就明白了，
先来写两个组件，componentA和componentB，他们内容都一样，但是文字的颜色不同
componentA：
<template>
<div class="text">这是第一个组件</div>
</template>
<script>
export default {}
</script>
<style scoped>
.text {
color: red;
}
</style>
componentB
<template>
<div class="text">这是第二个组件</div>
</template>
<script>
export default {}
</script>
<style scoped>
.text {
color: green;
}
</style>
要注意到，用到的class名称，.text 是相同的，
在App.vue中使用他们
<template>
<componentA></componentA>
<componentB></componentB>
</template>
<script>
// style标签使用
import componentA from './components/componentA.vue'
import componentB from './components/componentB.vue'
export default {
name: 'App',
components: {
componentA,
componentB,
},
}
</script>
<style></style>
我们在浏览器中查看结果
虽然class名字一样，但它们互不影响，如果把scoped去掉，我们发现文字都变成了红色
这个特性非常好，在开发时我们就不用担心不同组件里class命名冲突了，开发更顺心
关于scoped还好多进阶内容，大家在熟练掌握以后可以到官网学习。
2.lang属性
lang是language语言的简写，可以用来指定style里用哪种css语言，
如果没有这个属性，那么style里就是普通的css，
如果我们使用css预编译语言，比如scss，可以指定
<style scoped lang="scss">
.text {
color: red;
}
</style>
或者less，或者stylus，
比如指定使用scss，会提示找不到sass-loader
安装sass-loader 和 node-sass
npm i sass-loader node-sass -D
发现还是报错
安装指定版本的sass-loader
npm i sass-loader@10.x -D
然后在重新启动我们的项目
npm run serve
这样就OK了，
3.写多个style标签
在一个.vue单文件组件中，可以写多个style标签
<style scoped lang="scss">
.text {
color: red;
}
</style>
<style>
.text {
font-weight: 700;
}
</style>
