Vue.js样式表资源

Question

我最近发现了Vue.js. 我在单文件组件架构中使用它，我注意到我的所有组件都是＆＃39;样式都在页面中加载（即使是那些不活动的样式）。

有没有办法只加载当前组件＆＃39; CSS，并避免重复代码？

Answer 1

您可以使用scoped属性使样式仅适用于当前元素：

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

Answer 2

Webpack将concat and minify所有来源（即使它们都是作用域）。

  

将所有组件中的CSS提取到单个文件中并使用cssnano缩小。

我真的没有看到你需要将CSS拆分成单独文件的用例。