Большая часть моего сайта использует классы Bulma для некоторых глобальных стилей пользовательского интерфейса, и я хотел бы продолжать использовать эти классы в своих компонентах, но также иметь возможность определять модули CSS для этих компонентов для пользовательских настроек каждого компонента.
Из-за этого я добавил babel-plugin-react-css-modules в свой проект, что позволило мне использовать классы Bulma в className и помещать классы модулей в styleName. Хорошо, немного хакерское чувство, но оно работает. У меня есть файл global-styles.scss в каталоге CSS, который я загружаю в свой основной компонент приложения. Здесь я импортирую Bulma, а также определяю любой из моих собственных глобальных стилей.
Моя проблема заключается в том, что когда мои глобальные стили и стили моих модулей разбиваются вместе (через css-модули?) и вводятся в тег стиля в голове (через загрузчик стилей?), сначала определяются стили моих модулей, затем мои глобальные стили.
Я чувствую, что стили модулей имеют локальную область действия и всегда должны иметь приоритет (загружать последними), даже если я загружаю как глобальные, так и ограниченные стили в один и тот же компонент. Например, в одном компоненте я использую классы .navbar Bulma, но я также определяю свой собственный класс .navbar в своем модуле CSS для этого компонента и применяю оба к одному и тому же элементу в своем компоненте.
Могу ли я указать, в каком порядке создавать тег стиля? Между всеми этими плагинами я просто теряюсь, а потом, когда вы набрасываете на него абстракцию плагина Гэтсби, все очень запутанно.
🤔 А знаете ли вы, что...
React предоставляет жизненные циклы компонентов для управления состоянием и поведением.
Я не совсем уверен, что вызвало проблему, но, похоже, это относится к Гэтсби.
https://www.gatsbyjs.org/tutorial/part-two/#component-css
Tip: This part of the tutorial has focused on the quickest and most straightforward way to get started styling a Gatsby site — importing standard CSS files directly, using gatsby-browser.js. In most cases, the best way to add global styles is with a shared layout component.
Их рекомендуемый подход состоит в том, чтобы импортировать ваши глобальные файлы в ваш компонент макета. Это загружало мои глобальные переменные после моих модулей. Однако при создании файла gatsby-browser.js и импорте моих глобальных переменных мои стили загружаются в заданном порядке.