I am currently developing an App using Vue.js and CSS Components. Within my Vue components, I have noticed that some share similar styling.
In my Hello.vue component:
<template>
<div :class="$style.title">Hello, World</div>
</template>
<script>
export default {}
</script>
<style module src="./common.css"></style>
In my GoodBye.vue component:
<template>
<div :class="$style.title">Goodbye, cruel world.</div>
</template>
<script>
export default {}
</script>
<style module src="./common.css"></style>
The common.css file looks like this:
.title {
font-weight: bold;
}
After compiling and running the code, I encountered a CSS class duplication issue (._2miFMUAEBLdLB9wHpgrYF2):
Screenshot showing duplicated CSS classes
Is there a way to resolve this duplication problem?
You can find the complete code here