Vue style里面使用@import引入外部css, 作用域是全局的解決方案

yedf 發(fā)布于2019-08-29 14:10 / 1680人閱讀

摘要：并不是引入代碼到里面，而是發(fā)起新的請(qǐng)求獲得樣式資源，并且沒有加我們只需把改成引入外部樣式，就可以解決樣式是全局的問題整體代碼如下參考鏈接技術(shù)文檔

問題描述

使用@import引入外部css，作用域卻是全局的

Add "scoped" attribute to limit CSS to this component only

這句話大家應(yīng)該是見多了, 代碼也使用scoped了, 但是使用@import引入外部樣式表作用域依然是全局的，看了一遍@import的規(guī)則后, 進(jìn)行初步猜測(cè)，難道是@import引入外部樣式表錯(cuò)過了scoped style?

又回想到此前看過的前端性能優(yōu)化文章里面都有提到，在生產(chǎn)環(huán)境中不要使用@import引入css，因?yàn)樵谡?qǐng)求到的css中含有@import引入css的話，會(huì)發(fā)起請(qǐng)求把@import的css引進(jìn)來，多次請(qǐng)求浪費(fèi)不必要的資源。

@import并不是引入代碼到里面，而是發(fā)起新的請(qǐng)求獲得樣式資源，并且沒有加scoped

我們只需把@import改成引入外部樣式，就可以解決樣式是全局的問題

整體代碼如下:

參考鏈接

MDN Web技術(shù)文檔 @import

GPU云服務(wù)器云服務(wù)器引入外部css css-style php引入外部文件. cdn引入vue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112964.html

相關(guān)文章

Vue學(xué)習(xí)筆記之vue-cli項(xiàng)目搭建及解析

摘要：樣式通過標(biāo)簽包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加，如要引入外部文件，首先需給項(xiàng)目安裝依賴包，打開，進(jìn)入項(xiàng)目目錄，輸入回車。 showImg(https://segmentfault.com/img/remote/1460000013235090); （一）安裝node.js 首先需要安裝node環(huán)境，可以直接到中文官網(wǎng)http://nodejs.cn/...

Caizhenhao 2019-08-26 11:41 評(píng)論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長(zhǎng)假，把上篇剩下的部分也寫一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了?，F(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。個(gè)人博客了解一下：obkoro...

Lin_YT 2019-08-30 14:24 評(píng)論0 收藏0
前端筆試題面試題記錄（下）

摘要：前言接上篇前端筆試題面試題記錄上。默認(rèn)值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置，將依據(jù)它進(jìn)行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長(zhǎng)假，把上篇剩下的部分也寫一下，因?yàn)樽罱容^忙這篇已經(jīng)拖了很久了。現(xiàn)在剛剛開始銀四了，應(yīng)該還是有些小伙伴在找工作，時(shí)間還不算太晚，希望本篇可以幫到這些小伙伴。個(gè)人博客了解一下：obkoro...

suemi 2019-08-22 16:05 評(píng)論0 收藏0
面試知識(shí)點(diǎn)總結(jié)

摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過大時(shí)候可以壓縮一下。最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...

王晗 2019-08-30 14:15 評(píng)論0 收藏0
面試知識(shí)點(diǎn)總結(jié)

摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過大時(shí)候可以壓縮一下。最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...

CrazyCodes 2019-08-22 15:46 評(píng)論0 收藏0