CSS 模块不适用于过渡组件。如何解决？

Question

组件“过渡”在作用域样式中效果很好，但是当我尝试将它与模块化样式一起使用时，它就不能正常工作了。

在研究过程中，我发现了这个帖子：https://github.com/vuejs/vue-loader/issues/494

在这种情况下，核心 vue 开发人员建议使用 sass-loader 功能（&:global 选择器），但它对我不起作用。

我使用 Nuxt 和 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>

Answer 1

你使用什么 css 引擎，你有 VuetifyJs 或 TailwindJs 吗？如果您没有 Vuetify，您可能需要自己安装 sass loader，因为 Vuetify 附带 sass loader。 为了使用，你需要像这样安装 sass loader：npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass。 如果问题仍然存在，请尝试添加您的nuxt.config.js：

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