是否可以使用另一个 CSS 模块中的类？

Question

是否可以在一个 CSS 模块中使用另一个 CSS 模块中的类？

问题在于 CSS 模块正在进行自己的类名翻译，因此

.class

中的

A.css

将变为

A-module--class-something

，而

.class

中的

B.css

将变为

B-module--class--somethingElse

，并且它们将被视为单独的类。

A.css

.class {
  (...)
}

B.css

/* .class is the same class as in A.css */
.class > .someOtherClass {
}

Answer 1

我能做的就是像这样“导入”另一个类

@value someClass from "./xxx.module.css"; 

然后像这样引用它：

:global(.someClass) .myClass {
  margin: auto;
}

Answer 2

假设A和B都是CSS文件，如果你链接到它们（在头部），它们都会正常运行。

需要注意的是，如果他们说冲突的信息（他们针对相同的样式属性），则其中一种样式将不会被应用（在查看开发工具时它会被划掉）。您可以通过在样式中使用 !important 关键字来解决此问题。但请谨慎使用此关键字，因为它不被认为是最佳实践。

正如您在下面的片段中看到的，它选择使用一个。文件名可以在右侧看到。

Answer 3

你有这样的要求吗？

A.css

.class {
  /* rule-set */
}

B.css

@import "A.css"
.class > .someOtherClass {
  /* rule-set */
}

Answer 4

经过一番调查，似乎没有直接的方法来引用类名。

所以我想出了一个可能的解决方案：

B.css

:global(.class) > .someOtherClass {
  /* rule-set */
}

然后在你的html中应用class，处理后，它会像这样转换：

<div class="class A-module--class--something">
    <div class="B-module--class--somethingElse">
    </div>
</div>

这样，您就可以保留

A-module--class--something

规则（永远不会发生冲突）和更复杂规则的“类”参考。这不是最好的解决方案，因为您需要修改 html 代码，但它将最大限度地减少 css 污染的解决方法。

Answer 5

我需要在另一个模块中为类添加悬停 这是我的解决方案：

我导入了需要悬停的课程：

@value bage from './BageList/RecBage/styles.module.css';

并添加悬停：

.recommendCart:hover .bage:global {
}

.recommendCart - 我的第一个模块中的类名 .bage - 我的第二个模块中的类名