Можно ли использовать класс из другого модуля CSS?

Question

Возможно ли в одном CSS модуле использовать класс из другого CSS модуля?

Проблема в том, что CSS Modules выполняет трансляцию собственных имен классов и, следовательно, .class из A.css станет A-module--class-something, а .class из B.css станет B-module--class--somethingElse, и они будут рассматриваться как отдельные классы.

A. css

.class {
  (...)
}

Б. css

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

Answer 1

Предполагая, что A и B оба являются CSS файлами, если вы свяжетесь с ними обоими (в заголовке), они оба будут работать как обычно.

Важно отметить, что если они говорят о конфликте информации (они нацелены на один и тот же атрибут стиля) один из стилей не будет применяться (он будет перечеркнут при просмотре инструментов разработки). Вы можете решить эту проблему, используя ключевое слово! Important в ваших стилях. Но используйте это ключевое слово с осторожностью, так как это не считается наилучшей практикой.

Как вы можете видеть в приведенном ниже фрагменте, он выбирает одно для использования. Имена файлов можно увидеть справа.

введите описание изображения здесь

Answer 2

Вы просите что-то подобное?

A. css

.class {
  /* rule-set */
}

B. css

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