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類名的添加與刪除