vue中 css文件引入失敗等問題

1、全局引用css文件

main.js 作為一個入口文件可以全局引用css文件 在main.js中加入

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

值得注意的是如果是boostrap.css 文件，是需要這一些圖標庫的

當然也可以在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/