vue3 css module + scss 里，嵌套的 css 无法被 ide 识别 ？

Question

如 $style.content 会被ide提示报错,
$style.content1 就不会，求助

<script setup lang="ts">

</script>

<template>
  <div :class="$style.wrap">
    <div :class="$style.contnet"></div>
    <div :class="$style.content1"></div>
  </div>
</template>

<style module lang="scss">
.wrap {
    .content {}
}

.content1 {

}

</style>

Answer 1

这个问题主要是因为 IDE 无法识别嵌套的 CSS 类名。你可以尝试以下几种方法来解决这个问题：

使用 ::v-deep 选择器：

`.wrap {
::v-deep .content {}
}`
这可以帮助 IDE 识别嵌套的 CSS 类名。但请注意，这可能不适用于所有 IDE。

避免使用嵌套的 CSS 类名：

将嵌套的 CSS 类名提升到顶层，避免嵌套。
`
.wrap {}
.content {}
.content1 {}`
如果你使用的是 WebStorm 或 IntelliJ IDEA，可以尝试安装 Vue 插件，它可以帮助识别 CSS Modules。

Answer 2

这是因为 $style.content 中有一个拼写错误，应该是 $style.content 而不是 $style.contnet，所以IDE给出了报错提示。而 $style.content1 并没有错误拼写，因此没有报错提示。