我们之前写的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>