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