Спойлер.
Это вы видите normalize.css в самом конце вывода CSS:
И, ну, это тоже я, я был этим удивленным желтым парнем.
Как мы туда попали?
Наш текущий стек приложений включает Webpack, React и некоторые другие современные навороты. Каждый презентационный компонент React (тупой компонент) импортирует соответствующий файл CSS через конвейер SASS - PostCSS:
В корневой каталог «app.js» мы импортировали наш основной CSS следующим образом:
main-style.scss - это набор дополнительных стилей @imports и основных стилей, который выглядит следующим образом:
В один прекрасный день я запутался, получив цвет / размер шрифта / любой другой элемент заголовка, который, естественно, отличался от ожидаемого.
Копнув глубже, я пришел к вышеупомянутому открытию, которое меня поразило. Примерно пару месяцев мы используем основные стили, а также утилиты. Не только это, но и весь ожидаемый порядок CSS был полностью изменен. Организмы прежде, чем молекулы, прежде чем атомы, если вы понимаете, о чем я.
Самое интересное, что это просто сработало! благодаря продуманной архитектуре CSS, БЭМ и Styleguide.
Но в любом случае это была ошибка, и ее нужно было исправить.
Внимательный читатель мог заметить зависимость router, используемую в app.js. В принципе, это может быть что угодно, мы используем React Router.
Как это связано?
Проблема с Webpack:
И решение:
Последний просто говорит поместить импорт CSS перед маршрутизатором. Это решает проблему, ура! Мы тоже. Спасибо за чтение.
Есть что-то еще? Абсолютно!
Зная, что CSS, импортированный после Router, всегда будет в конце вывода, мы скорректировали включение стилей, чтобы утилиты могли занять нужное место:
Хотите узнать больше о сложной архитектуре CSS?
Следите за обновлениями;)
