一、前言

在开发的过程中，往往会使用大量的重复性的CSS样式来美化页面，但是如果每个页面都重复多次CSS样式，不仅浪费时间和精力，而且在样式修改时也会很麻烦。因此，我们需要将CSS样式设为公用，使其可以被整个项目所共享。

二、实现方法

前置条件

• 在项目的assets目录下创建一个名为styles.css的文件；
• 将所有公用的 CSS 样式都写在这个文件中；
• 引入成功后公共样式的类名可重复调用，不需要当前页面再次重复css代码。

1、使用import方法引入公共样式

<template>

  <div class="box color font" >content</div>

</template>

<script>
// import引入css文件
import '../assets/style.css'
</script>
<style scoped lang="scss"></style>

2、在style标签中引入公共样式

<template>

  <div class="box color font" >content</div>

</template>

<script></script>
<style scoped lang="scss">
// @import引入css文件
@import url(../assets/style.css);
</style>