Большая часть моего сайта использует классы Bulma для некоторых из моих глобальных стилей пользовательского интерфейса, и я хотел бы продолжать использовать эти классы в своих компонентах, но также иметь возможность определять модули CSS для этих компонентов для индивидуальных настроек для каждого компонента.
Из-за этого я добавил babel-plugin-react-css-modules в свой проект, что позволило мне использовать мои классы Bulma в className и поместить свои классы модулей в styleName. Хорошо, немного хакерское ощущение, но оно работает. У меня есть global-styles.scss файл в каталоге CSS, который я загружаю в свой основной компонент приложения. Здесь я импортирую Bulma, а также определяю любой из моих собственных глобальных стилей.
Моя проблема в том, что когда мои глобальные стили и стили модулей разбиваются вместе (через css-модули?) И вводятся в тег стиля в голове (через загрузчик стилей?), Сначала определяются стили моего модуля, а затем мои глобальные стили.
Мне кажется, что стили модуля имеют локальную область видимости и всегда должны иметь приоритет (загружаться последними), даже если я загружаю как глобальные стили, так и стили с ограниченной областью видимости в один и тот же компонент. Например, в одном компоненте я использую классы .navbar Bulma, но я также определяю свой собственный класс .navbar в моем модуле CSS для этого компонента, и я применяю оба к одному и тому же элементу в моем компоненте.
Есть ли способ указать, в каком порядке строить тег стиля? Я просто потерялся между всеми этими плагинами, а когда вы добавляете абстракцию плагина Гэтсби поверх него, все это очень сбивает с толку.
