CODEWITHSUNDEEP
vuejs2vue-cli-3css-modules
Jleibham
Jleibham

Reputation: 530

Vue CSS Modules

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.

Upvotes: 1

Views: 816

Answers (2)

Batyodie
Batyodie

Reputation: 161

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>

Upvotes: 0

Jleibham
Jleibham

Reputation: 530

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.

Upvotes: 1

Related Questions