vue中 css文件引入失败等问题

1、全局引用css文件

1. main.js 作为一个入口文件可以全局引用css文件
   在main.js中加入

import '../static/css/bootstrap/study/bootstrap.min.css'

值得注意的是如果是boostrap.css 文件，是需要这一些图标库的

如果没有这些，引入bootstrap css文件，项目编译时，会报这些module不存在。
因此我们只需要去bootstrap 官网下这些库就行了。但是还有一点需要注意：这些文件需要放在fonts目录下，并且bootstrap.min.css需要放在同级目录的子目录下。
示例：

2. 当然也可以在App.vue 的 style模块中添加全局css文件
   

@import问题

import语法主要有两种：
写在style块中
@import “xxx.css”;
@import url(“xxx.css”);

需要注意的是：import规则一定要先于除了@charset的其他任何CSS规则

示例：

也即@import的引入 应该写在第一行

以下部分转至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导致下载顺序紊乱

个人博客：https://www.xiaoxuya.top/