Vue CSS Modules

Question

I've been trying to come up with a solution for our component library that will render styles differently based on the project it is imported into. In my research I've found a possible solution in CSS Modules. The problem I'm currently facing is when I use named modules they compile down to the same css class so styles in two different named modules are overwriting each other. The documentation on Vue's website is very slim so I'm unsure if I'm currently implementing my code correctly. Can someone let me know if I'm missing something or if they have had a similar issue before?

<template>
  <button :class="a.button" type="button" v-on="$listeners">
    <slot/>
  </button>
</template>

<script>
export default {
  console.log(this.a, this.b)
}
</script>

<style module="a">
.button {
  background-color: red;
}
/* identifiers injected as a */
</style>

<style module="b">
.button {
  background-color: blue;
}
/* identifiers injected as b */
</style>

In my console.log(this.a, this.b) the console returns both rendered class names as the same {button: "index_button_2JdpP"} {button: "index_button_2JdpP"} so clearly there is an issue in my code or I'm misunderstanding the purpose of naming a CSS module.

Jleibham · Accepted Answer · 2019-02-28 20:11:57Z

1

I found a work around by importing CSS files into my script and setting my styles with a computed property.

<template>
  <button type="button" :class="styles.button" v-on="$listeners">
    <slot/>
  </button>
</template>

<script>
import remax from './remax.scss'
import crm from './crm.scss'

export default {
  computed: {
    styles() {
      return remax
    },
  }
}
</script>

<style modules lang="scss"></style>

Unfortunately doing things this way has bleed some styles into my project but this might be due to my implementation in the scss file.

answered Feb 28, 2019 at 20:11

Jleibham

5403 gold badges9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Batyodie · Accepted Answer · 2020-10-14 07:15:34Z

0

There is such a way, for solving this or a similar problem, If you import through , specify module at the end of the file and process Computed. Then you can name the css classes the same, they will not be overwritten. At least for me.

 <template>
  <div id="app" :class="BaseApp.Container">
    <router-view :class="BaseView.Container" />
  </div>
</template>
<script>
import BaseApp from "@/components/Base/Styles/BaseApp.css?module";
import BaseView from "@/components/Base/Styles/BaseView.css?module";
export default {
  components: {},
  computed: {
    BaseApp() {
      return BaseApp;
    },
    BaseView() {
      return BaseView;
    },
  },
};
</script>

answered Oct 14, 2020 at 7:15

Batyodie

1611 silver badge5 bronze badges

Collectives™ on Stack Overflow

Vue CSS Modules

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related