通常專案中src下的子目錄都會有乙個style資料夾，專門用來存放全域性的樣式檔案。
這個style資料夾下，一般有reset.css、var.scss、mixin.scss、class.scss、index.scss
一般都會在index.scss檔案中引入其他檔案做統一管理，並在main.js中引入index.scss
我們在開發vue檔案時，通常會用到全域性樣式檔案，尤其是mixin.scss。
經常在vue檔案中會出現，直接引入index.scss的情況
假如有兩個vue檔案都是這樣引入的，你在審查元素的時候會發現，同乙個class樣式宣告了兩次。
比如a.vue和b.vue都引入了index.scss並都用到了class="red"，index.scss引入的class.scss中定義了乙個樣式.red。
那麼，當你審查該元素的時候會發現，這個.red在頁面上被定義了兩次。
像.red這樣的內容會被單獨打包進於該vue檔案中（如果使用了css-extract-plugin，同樣打包進與該vue對應的css檔案中)。
所以元件載入完，樣式也會被新增到頁面中。
如果每個頁面都直接引入了index.scss。無形中會給瀏覽器造成很大的負擔(因為樣式樹的生成、樣式樹與文件樹結合的效率很低）。
那如何避免呢？
正確的姿勢是:
只引入@import "~@/styles/mixin.scss"、@import "~@/styles/var.scss"
他們只會將 vue檔案中@include clearfix直接替換為
&:aftervue學習記錄 vue中引入樣式檔案
一 在vue中使用scss 首先進行安裝如下依賴 cnpm i sass loader node sass d二 vue中引入樣式檔案 1 在index.html模板html檔案中引入，這種方式引入的原樣編譯在生成的html檔案中，如果想要通過link引入外部的樣式檔案，建議使用這種方式 2 在入口...
vue中檔案樣式的引入（ css scss）
在mian.js檔案中進行全域性引入 import vue from vue import normalize.css normalize.css a modern alternative to css resets import elementui from element ui import e...
CSS樣式引入
我們已經學習了行內 內嵌和外鏈三種方式來引入我們的 css 樣式，這裡我們再深入 下。通過給元素新增 style 屬性來新增樣式，如下 style color red 顏色為紅色div style color red 顏色為紅色div 所以我們一般不會大量使用這種方式新增樣式，只有在少量使用 js ...