Question

我有一个Rails / Webpacker / Vue应用程序，我想在每个页面上有不同的样式。这可能是这样的：

// page-a.vue
<style lang="scss">
  @import './stylesheets/a';
</style>



// page-b.vue
<style lang="scss">
  @import './stylesheets/b';
</style>

这些样式表具有完全不同的规则，不应混用。

在使用webpack-dev-server进行开发时，样式表按预期保持独立。但是，运行webpacker:compile时，样式表会合并，并且两个文件都会使用所有CSS。

正因为如此，部署到生产导致我的应用程序看起来与开发中的差别很大。

使用webpacker:compile时如何将CSS文件分开？

Answer 1

使用.vue文件，您可以使用作用域的CSS。这样，css文件将被加载器作为单独的样式标记包含在内。

<style scoped> .example { color: red; } </style>