vue 中css文件引入問題

css外部文件引入:

全局引用

在main.js文件中

import './style/reset.css'

   <style>
         @import '../../xxx.css';    //要寫分號否則會報錯
    </style>

<style  scoped>
            //寫scoped表示只在當前局部有效
             body{
                    width:1000px;     //這樣寫才是局部有效的，如果是引入的css文件就還是全局有效
             }
</style>

以下參考：https://blog.csdn.net/weixin_39941429/article/details/80254724

首先是有關@import的問題，一般的文件中，我們知道引用外部css，有兩種方式：

1. HTML中使用link標簽

<link rel="stylesheet" href="style.css" />

2.CSS中@import

<style>
   @import "style.css";
</style>

import語法有兩種：

@import "style.css";
@import url("style.css");

兩種寫法效果一樣

注意到加粗的部分么——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里定義的藍色。

以上部分轉載自點擊打開鏈接

當然使用鏈接link和導入import的好處就是易於維護，但當網速比較慢的時候，會出現加載中斷的情況，導致頁面排版錯誤

外部引用CSS中 link與@import的區別

1.從屬關系區別

link是HTML提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性等。@import是 CSS 提供的語法規則，只有導入樣式表的作用。

2.加載順序區別

加載頁面時，link標簽引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢后被加載。

3.兼容性區別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標簽作為 HTML 元素，不存在兼容性問題。

4.DOM可控性區別

link支持使用js控制DOM去改變樣式；@import不支持。

另外：

js中也可以引入相應的css樣式 然后用js動態控制css類名的添加與刪除