Могу ли я сказать style-loader загружать мой глобальный CSS перед моими модулями CSS?
Большая часть моего сайта использует классы Bulma для некоторых из моих глобальных стилей пользовательского интерфейса, и я хотел бы продолжать использовать эти классы в своих компонентах, но также иметь возможность определять CSS-модули для этих компонентов для индивидуальной настройки каждого компонента.
Из-за этого я добавил babel-plugin-react-css-modules в мой проект, который позволил мне использовать мои классы Булмы в className и положить мои классы модуля в styleName, Хорошо, немного хакерское чувство, но оно работает. у меня есть global-styles.scss файл в каталоге CSS, который я загружаю в основной компонент приложения. Здесь я импортирую Bulma, а также определяю любой из моих глобальных стилей.
Моя проблема в том, что когда мои глобальные стили и стили моего модуля разбиваются вместе (через css-модули?) И внедряются в тег style в голове (через style-loader?), Сначала определяются стили моего модуля, а затем глобальные стили.
Я чувствую, что стили модулей имеют локальную область видимости и должны всегда иметь приоритет (загружать в последнюю очередь), даже если я загружаю как глобальные, так и объемные стили в одном компоненте. Например, в одном компоненте я использую Bulma's .navbar классы, но я также определяю свой собственный .navbar класс в моем модуле CSS для этого компонента, и я применяю оба к одному и тому же элементу в моем компоненте.
Есть ли в любом случае, я могу указать, какой порядок для создания тега стиля? Между всеми этими плагинами я просто потерян, потом, когда вы добавляете абстракцию плагина Гэтсби поверх всего этого, и это все очень запутанно.
1 ответ
Я не совсем уверен в том, что стало причиной проблемы, но, похоже, это относится к Гэтсби.
https://www.gatsbyjs.org/tutorial/part-two/
Подсказка. Эта часть руководства посвящена наиболее быстрому и простому способу начать стилизацию сайта Gatsby - прямому импорту стандартных файлов CSS с использованием gatsby-browser.js. В большинстве случаев лучший способ добавить глобальные стили - использовать совместно используемый компонент макета.
Их рекомендуемый подход - импортировать ваши глобальные файлы в ваш компонент макета. Это загружало мои глобалы после моих модулей. Тем не менее, создавая gatsby-browser.js файл, и импорт моих глобалов загружает мои стили в нужном порядке.