在 .vue 单文件组件中引入 css 文件，并且样式只作用于当前组件的元素

先复习一下局部样式的写法

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

进阶：把样式放到 css 文件中，怎么限制作用域

用 <style>，方法和原理都和上面相同

<style scoped src="./main.css"></style>

注意：这种方法只能引入纯 css 文件。less 或者 scss 文件都不可以

不能用 import

不能像下面这样 import，这样引入的样式，作用域是全局：

<script>
		import './main.css';	// 作用域是全局
</script>