Импортируемые стили в mobile.scss не имеют приоритета над основными объявлениями

Я просматриваю некоторые темы и вижу, что для мобильных стилей теперь правила, объявленные в них, перезаписываются правилами ядра.

Когда я объявляю правило напрямую в файле mobile/mobile.scss, оно имеет приоритет и применяется. Но когда я использую @import в mobile.scss, импортируемые объявления перезаписываются.

Например, некоторые импортируемые объявления в темах, которые теперь перезаписываются объявлениями в ядре:

#list-area { background: xxx;}
body { background-color: xxx;}
2 лайка

Хм, это удивительно. Стили темы, будь то мобильная или настольная версия, загружаются после основных стилей, см.:

Вы уверены, что не происходит что-то ещё, например, проблема со специфичностью селекторов? Часто основные стили обновляются с более специфичными селекторами, что может привести к регрессии в темах, использующих исходные селекторы.

2 лайка

Дело было не в специфичности, так как я переключал абсолютно одинаковые объявления между mobile.scss и использовал @import в mobile.scss. Одно применялось, а другое перезаписывалось в инспекторе браузера.

Но теперь я тоже не могу воспроизвести это! Только что создал пустой компонент только с mobile.scss, чтобы попробовать снова, и объявления применяются обоими способами.

Извините за ложный отчет! Хотя я не понимаю, что вызвало это раньше… это происходило и в разных браузерах..

2 лайка

Не переживайте! Возможно, это происходит при определённых условиях…

2 лайка