Как рассказать одному css файлу о другом при использовании css modules?

Question

[Александр Вульф]

Подскажите, кто работал со stylus и css modules, как импортнуть стили из одного файла в другой без стилей?)

Объясню кейс: у нас есть такая разметка: <a><b>Foo</b><c>Bar</c></a>. Стили для a и b задаются в файле 1.styl, а для c в файле 2.styl.
Далее нам надо сделать так, чтобы при наведении на a загоралась рамочка у a и у c. Можно, конечно в файле 1.styl сделать что-то типа a > *:fisrt-child{}, но это шляпа.

Хочется как-то сказать файлу 1.styl, что есть другой файл 2.styl и получить что-то типа такого:

// 1.styl
import other from './2.styl';

a:hover
  border-color red
  other(b)
    border-color red

P.S.: конечно, у нас нет тегов a и b, у нас есть дивы с классами. В вопросе написал так для простоты. Идея, надеюсь, понятна. И, да, я понимаю, что это вопрос не по stylus. Он просто препроцессор и на его уровне абстракции css modules ещё не работает. Так что это скорее вопрос по вебпаку и самим css modules. То есть по тому модулю, где реализован :global, например.

Answer 1

[FeST1VaL]

Если я правильно понял вас, то вот это почитайте: stylus-lang.com/docs/import.html

P.S я просто не пользуюсь Stylus, но в scss так же)

Comments

[Александр Вульф]

И, да, я понимаю, что это вопрос не по stylus. Он просто препроцессор и на его уровне абстракции css modules ещё не работает. Так что это скорее вопрос по вебпаку и самим css modules. То есть по тому модулю, где реализован :global, например.