Question

我一直在尝试为我们的组件库提供一个解决方案，该解决方案将根据导入的项目来呈现不同的样式。在我的研究中，我发现了CSS模块中可能的解决方案。我目前面临的问题是，当我使用命名模块时，它们会编译为相同的CSS类，因此两个不同命名模块中的样式会相互覆盖。 Vue网站上的文档非常狭窄，因此我不确定当前是否正确实现我的代码。有人可以让我知道我是否缺少某些东西，或者他们之前有过类似的问题吗？

<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>

在我的console.log(this.a, this.b)中，控制台将两个渲染的类名返回为相同的{button: "index_button_2JdpP"} {button: "index_button_2JdpP"}，因此很明显我的代码中有问题，或者我误解了命名CSS模块的目的。

Answer 1

通过将CSS文件导入脚本并使用计算属性设置样式，我找到了解决方法。

<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>

不幸的是，这种方式使我的项目流失了一些样式，但这可能是由于我在scss文件中的实现。

Answer 2

有一种解决此问题或类似问题的方法，如果通过导入，请在文件末尾指定模块并处理Computed。然后您可以将css类命名为相同的名称，它们不会被覆盖。至少对我来说。

 <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>

Vue CSS模块

2 个答案: