2016-03-08 71 views
2

我最近發現了Vue.js. 我使用它與單個文件組件體系結構,我注意到我的所有組件的樣式都加載在頁面中(即使那些不活動)。Vue.js樣式表資源

有沒有辦法只加載當前組件的CSS,並避免代碼重複?

回答

1

可以使用scoped屬性使樣式僅適用於當前元素:

<style scoped> 
    .class{ 
    //will only apply to this component 
    } 
</style> 
+0

我已經測試過,但是使用「scoped」將屬性添加到目標組件的主HTML元素,並且作用域樣式使用此屬性進行選擇。但是,如果組件未處於活動狀態,它仍會加載在同一頁面上。 –

+0

就像@Cohars說的,我認爲有一個縮小的CSS文件是最適合您的應用程序的。每次加載新組件時通過HTTP請求加載CSS都不是最佳解決方案。 – Jeff

+0

你爲什麼要一直加載和卸載CSS?你擔心渲染性能嗎? –

1

的WebPack將concat and minify所有源(即使是局部的)。

將CSS跨所有組件提取到一個文件中並用cssnano進行縮小。

我真的沒有看到您需要將CSS分割爲單獨文件的用例。