這篇文章給大家分享的是有關vue如何引用css的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

vue引用css的方法：1、全局引入，語法格式為“import 'css文件地址'”；2、局部引入，語法格式為“<style scoped>@import 'css文件地址';</style>”。

本教程操作環境：windows7系統、vue2.9.6版、Dell G3電腦。

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。

在vue中引入外部的css文件：

在項目的src文件下，新建一個style文件夾，存放css文件。

1. 全局引入

將外部的css文件放到style文件下，引入外部文件只需在main.js文件中

import'./style/reset.css'

我引入的是清除默認樣式的css文件

2. 局部引入

<stylescoped>
@import'../assets/iconfont/iconfont.css';這個分號一定要寫，要不會報錯
</style>

@import CSS@規則，用于從其他樣式表導入樣式規則。這些規則必須先于所有其他類型的規則，@charset 規則除外; 因為它不是一個嵌套語句，@import不能在條件組的規則中使用。

因此，用戶代理可以避免為不支持的媒體類型檢索資源，作者可以指定依賴媒體的@import規則。這些條件導入在URI之后指定逗號分隔的媒體查詢。在沒有任何媒體查詢的情況下，導入是無條件的。指定所有的媒體具有相同的效果。

總結

以上是生活随笔為你收集整理的vue如何引用css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。