When using Nuxt 2 with CSS modules, I encountered an issue where multiple components resulted in multiple CSS files having the same class.
Hello.vue
<template>
<div :class="$style.title">Hello, World</div>
<div :class="$second.secondClass">Hello, World</div>
</template>
<script>
export default {}
</script>
<style module src="./hello.css"></style>
<style module="$second" src="./uncommon.css"></style>
Goodbye.vue
<template>
<div :class="$style.title">Goodbye, World</div>
<div :class="$second.secondClass">Goodbye, World</div>
</template>
<script>
export default {}
</script>
<style module src="./goodbye.css"></style>
<style module="$second" src="./uncommon.css"></style>
As a result, both files contain the same class .YT3xv.
This raises the question of whether there is a solution to this problem. Ideally, I would like to extract these classes into a separate file.