鍍金池/ 問答/HTML5  HTML/ vue的style src和style @import有什么區(qū)別嗎？

vue的style src和style @import有什么區(qū)別嗎？

 <style src="/static/home.css" scoped></style>
<style scoped>
    @import url("/static/home.css");
</style>

代碼如上，如果使用@import的方式的話，不同組件切換后，發(fā)現(xiàn)頁面都亂了，審查元素發(fā)現(xiàn)<head>里面有多個(gè)css，雖然加了scoped，但是沒有用，后來百度搜索，發(fā)現(xiàn)sf上也有個(gè)問題，和我一樣，答案里面推薦使用src引用css，試了下，每個(gè)組件對(duì)應(yīng)了每個(gè)css，頁面正常了。然后就有疑惑了，這兩種有什么區(qū)別嗎？為什么@import導(dǎo)致<head>里面有多個(gè)css呢？不是加了scoped嗎

回答
編輯回答
影魅

http://www.jianshu.com/p/9caf...
1、我覺得你應(yīng)該先理解一下scoped的原理和作用
2、然后我覺得你就可以查找一下為什么樣式亂的原因，我覺得就是應(yīng)該是vue-loader里tag打沒打上的問題，希望得到樓主更加詳細(xì)的解決結(jié)果

————————————————————————

好了我自行測(cè)試了一下，果然是tag標(biāo)簽的問題
你@import導(dǎo)入進(jìn)來css并沒有被打上tag標(biāo)簽，也就是說他是一個(gè)全局的css，同樣會(huì)作用到你別的組件中，也就會(huì)使你的樣式亂套
而src引入的會(huì)被vue-loader打上tag

例子：
@import導(dǎo)入的style編譯后的內(nèi)容

<style type="text/css">
#test {
  font-size: 100px;
}</style>

src導(dǎo)入的style編譯后的內(nèi)容

<style type="text/css">
#test[data-v-3c208292] {
  font-size: 100px;
}</style>
2017年3月1日 11:46