1、全局引用css文件
- main.js 作为一个入口文件可以全局引用css文件
在main.js中加入
import '../static/css/bootstrap/study/bootstrap.min.css'值得注意的是如果是boostrap.css 文件，是需要这一些图标库的
如果没有这些，引入bootstrap css文件，项目编译时，会报这些module不存在。
因此我们只需要去bootstrap 官网下这些库就行了。但是还有一点需要注意：这些文件需要放在fonts目录下，并且bootstrap.min.css需要放在同级目录的子目录下。
示例：
- 当然也可以在App.vue 的 style模块中添加全局css文件
@import问题
import语法主要有两种：
写在style块中
@import "xxx.css";
@import url("xxx.css");
需要注意的是：import规则一定要先于除了@charset的其他任何CSS规则
示例：
也即@import的引入 应该写在第一行
以下部分转至[https://segmentfault.com/a/1190000000369549
](https://segmentfault.com/a/1190000000369549)
import规则一定要先于除了@charset的其他任何CSS规则，这句话是什么意思呢，我们看个例子：
index.html
<style type="text/css">
.hd{
color: orange;
}
@import "import.css";
</style>
...
<p class="hd">我是什么颜色</p>import.css
.hd{
color: blue;
}测试发现，p的颜色并不是import.css里所定义的蓝色，而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件，这正是因为，再次强调一遍，import规则一定要先于除了@charset的其他任何CSS规则，所以需要将index.html改成酱紫：
<style type="text/css">
@import "import.css";
.hd{
color: orange;
}
</style>
...
<p class="hd">我是什么颜色</p>这时候能看到import.css网络请求，p的颜色为橘黄色，覆盖了import.css里定义的蓝色。
使用@import影响页面性能的地方主要体现在两个方面：
1. 影响浏览器的并行下载
2. 多个@import导致下载顺序紊乱
