CSS module doesn't work with transition component. How to fix it?

user_17801669 0
Viewed 201

Component 'transition' works pretty well with scoped styles, but when I try to use it with modular styles it doesn't work properly.

While researching, I found this thread: https://github.com/vuejs/vue-loader/issues/494

In this case, core vue developers suggest using the sass-loader features (&:global selector), but it doesn't work for me.

I use Nuxt and Vue2.

<template>
  <div :class="$style.wrapper">
    <button @click="visible ? visible = false : visible = true">
      Show Text
    </button>
    <transition name="test">
      <p v-show="visible">
        Just Text
      </p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
    return {
      visible: false
    }
  }
}
</script>

<style module lang="scss">
.wrapper {
  &:global(-enter-active) { transition: opacity 1s; }
  &:global(-leave-active) { transition: opacity 1s; }
  &:global(-enter) { opacity: 0; }
  &:global(-leave-to) { opacity: 1; }
}
</style>
vuejs2 nuxt.js
1 Answers

What css engine do you use, do you have VuetifyJs or TailwindJs ? If you don'thave Vuetify, you might need to install sass loader yourself because Vuetify is shipped with sass loader. In order to use you need to install sass loader like this : npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass. if it problem persist, try to add in your nuxt.config.js:

export default {
  build: {
    loaders: {
      scss: {
        implementation: require('sass'),
      },
    },
  }
}
user_88589270
Related