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

yedf 發布于2019-08-29 14:10 / 1664人閱讀

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

問題描述

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

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

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

又回想到此前看過的前端性能優化文章里面都有提到，在生產環境中不要使用@import引入css，因為在請求到的css中含有@import引入css的話，會發起請求把@import的css引進來，多次請求浪費不必要的資源。

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

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

整體代碼如下:

參考鏈接

MDN Web技術文檔 @import

云服務器 GPU云服務器引入外部css php引入外部文件. cdn引入vue js中引入外部js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112964.html

Vue學習筆記之vue-cli項目搭建及解析

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

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

摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據自身位置進行偏離，當子元素設置，將依據它進行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了。現在剛剛開始銀四了，應該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。個人博客了解一下：obkoro...

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

摘要：前言接上篇前端筆試題面試題記錄上。默認值，不脫離文檔流，，，，等屬性不生效。。不脫離文檔流，依據自身位置進行偏離，當子元素設置，將依據它進行偏離。。前言接上篇前端筆試題面試題記錄（上）。趁清明小長假，把上篇剩下的部分也寫一下，因為最近比較忙這篇已經拖了很久了。現在剛剛開始銀四了，應該還是有些小伙伴在找工作，時間還不算太晚，希望本篇可以幫到這些小伙伴。個人博客了解一下：obkoro...

suemi 2019-08-22 16:05 評論0 收藏0
面試知識點總結

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

王晗 2019-08-30 14:15 評論0 收藏0
面試知識點總結

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

CrazyCodes 2019-08-22 15:46 評論0 收藏0