在vue中引入外部的css文件

在項(xiàng)目的src文件下，新建一個(gè)style文件夾，存放css文件。

1. 全局引入

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

import '@/style/reset.css'

我引入的是清除默認(rèn)樣式的css文件

2. 局部引入相對路徑

<style scoped>
  @import '../../assets/iconfont/iconfont.css';這個(gè)分號一定要寫，要不會(huì)報(bào)錯(cuò)
</style>

2. 局部引入絕對路徑

<style scoped>
 @import '@/styles/scroll-bar.scss';這個(gè)分號一定要寫，要不會(huì)報(bào)錯(cuò)
 
</style>

注意

使用@import引入樣式文件，就算加scoped，其它沒有引入的模塊還是可以訪問到你的樣式，如果某個(gè)組件的類名一致，則就會(huì)被污染到。
如果不想被污染，修改引入方式

<style src="@/style/reset.css"  scoped></style>

要是在寫新的樣式，要重新寫一個(gè)新的style標(biāo)簽

<style src="@/style/reset.css"  scoped></style>
<style scoped>
  //新的css樣式
</style>

我引入一個(gè) download.scs 文件：

<style src="./download.scss" scoped>

像上邊引入的時(shí)候報(bào)：style-loader: Adds some css to the DOM by adding a \<style> tag

改成下邊這樣就好了，也不知道為什么?

<style src="./download.scss"  lang="scss" scoped>

總結(jié)

以上是生活随笔為你收集整理的在vue中引入外部的css文件「建议收藏」(什么是vue)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。