Я видел некоторые похожие вопросы об переопределении стилей с @import, люди предлагают поместить @import внизу, но это, похоже, не работает здесь.
--- index.html ---
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
This text should be green.
</body>
--- style.css ---
body {color: red;}
@import url('style-override.css');
--- style-override.css ---
body {color: green;}
В приведенном выше примере выводится текст красный, а зеленый.
Объявление style-override.css после того, как style.css внутри главы решит проблему, но я хочу использовать файл @import внутри css файла.
Добавление ! important в style-override.css также получит ожидаемый результат, но это не так, как должно работать.
Кто-нибудь может это объяснить?
Это не работает, потому что любое правило импорта, объявленное внутри таблицы стилей, должно появляться перед всем остальным - иначе... ну, это не работает;).
Итак, что вы должны иметь в таблице стилей style.css:
@import url('style-override.css');
body {color: red;}
@import правила должны быть наверху. Об этом говорит спецификация CSS.
Любые правила @import должны предшествовать всем другим правилам правил и стиля в таблице стилей (кроме @charset, которая должна быть первой в таблице стилей, если она существует), иначе правило @import недействительно.